Feature Request: Option to remove item when dropped outside of container.

Maybe I missed something much simpler (I sure hope not…), but it took me quite a bit of playing around with the current API to make this work.

In case anyone needs this functionality too, here’s how I did it: I ended up tracking when the dragged item would leave its original container’s bounds, and whether it moved back into it (dragEnter, dragLeave).

I also needed to track if the dragged item entered the bounds of any other containers that returned should-accept-drop as true, because onDrop fires too late for me to interrupt the drag end animation in case it wasn’t dropped.

Then I had to implement a mouseup listener on an upper level container so it would catch the drag release (dragEnd fires too late) and modify the style attributes applied as follows:

// transitionProperty order: left, top, opacity, transform
ghostEl.style.transitionDelay = '5s, 5s, 0s, 0s'
ghostEl.style.transitionDuration = '0.25s'

I was unable to figure out a way to set the transition attributes beforehand, as doing so would affect the animation of dragging the ghost too. There is a position: left & top applied to the ghost item when it is released to simulate it “returning” to its original spot. The styles above combined with a scaling effect simulate a disappearing animation (it’s the same one used when you drag items out of a smooth-dnd “copy” container and drop them in the middle of nowhere). shouldAnimateDrop cannot be used for any of this since it’s technically not a drop to release outside of a container.

Originally I had considered wrapping all my drop containers with a “board” container which could then detect drops onto it… but I couldn’t get that to work.

[kutlugsahin]

Hey @zerosym Added in 0.2.6 with ‘remove-on-drop-out’ boolean prop. If you set it true then Container will call ‘drop’ with ‘removedIndex’ set. and the moving back animation will become fade out animation. Cheers!

[davestewart]

Unless you can explain otherwise, I think perhaps this is where an onDropComplete handler would be invaluable - in this case, with a removedIndex but no addedIndex:

• https://github.com/kutlugsahin/vue-smooth-dnd/issues/85