import { Component } from "@angular/core" ; import * as faker from 'faker' ; import { SortableSpec , DraggedItem } from "@angular-skyhook/sortable" ; interface SimpleData { id : number ; name : string ; } @ Component ( { selector : 'app-simple-sortable' , styleUrls : [ './simple.component.scss' ] , templateUrl : './simple.component.html' , } ) export class SimpleComponent { fake = ( ) => faker . fake ( '{{hacker.adjective}} the {{hacker.abbreviation}} {{hacker.noun}}' ) ; list : SimpleData [ ] = [ { id : 1 , name : this . fake ( ) } , { id : 2 , name : this . fake ( ) } , { id : 3 , name : this . fake ( ) } , { id : 4 , name : this . fake ( ) } , { id : 5 , name : this . fake ( ) } , ] ; tempList : SimpleData [ ] = this . list ; move ( item ) { const temp = this . list . slice ( 0 ) ; temp . splice ( item . index , 1 ) ; temp . splice ( item . hover . index , 0 , item . data ) ; return temp ; } simpleSpec : SortableSpec < SimpleData > = { type : "PRIORITY" , trackBy : x => x . id , hover : item => { this . tempList = this . move ( item ) ; } , drop : item => { this . tempList = this . list = this . move ( item ) ; } , endDrag : _item => { this . tempList = this . list ; } } ; }