using removeOnSpill removes it from the dom but not from the list.

[AnouarMc]

There seems to be a bug using removeOnSpill property on draggable updates the dom but not the bind list.

Here is a fiddle:
https://jsfiddle.net/Lgw61rcx/

[David-Desmaisons]

Thanks for reporting this one. I will need to investigate more but it seems that in this case sortable is not emitting the remove event that vue.draggable is listening.

[felixturner]

any ideas for a work around? This is a show-stopper for my use-case. thanks!

[felixturner]

my hack work around was to use the @end event to test if e.newIndex === e.oldIndex and if mouse is outside the list div (using event.originalEvent client X and Y), then manually remove the item from the array using splice(e.newIndex, 1)

[Marchiuzzz]

I'll share my workaround in case anyone stumbles on this. We can pass a function to be called onSpill over a prop like so

<draggable v-model="myGroup" :key="control" :removeOnSpill="true" :onSpill="removeItem" :sort="true">
....
</draggable>

Then I have removeItem function like so:

removeItem(event){
            this.myGroup.splice(event.oldIndex, 1);
            this.control++;
},

Just by synchronizing the data removal with spill didn't solve weird DOM behavior because it seemed that DOM element removal happened twice - once by the spill event and then by Vue rendering because of the removed item, that's where control variable comes. As you can see I use it as key for the draggable component, meaning Vue will re-render that component if the value of control changes, so once I update my data set, I also force a re-render of the component to match my new data and overcome any weird behavior with spill removal.