Hi guys, I’m looking for a good drag & drop support for my app that will run in a Cordova app and desktop browsers. I’m targeting newer browsers, so it does not have to support legacy browsers (i.e. older IE versions).
Here’s my requirements:
- Enable and disable drag & drop on source items
- While dragging the source item around, show a copy (shadow) of it under the cursor (i.e. don’t drag the original object). This shadow should show up instantly, i.e. there should not be any noticable delay when starting the drag.
- Allow that shadow to be dragged everywhere on screen, i.e. don’t limit its movement to the borders of the original item’s parent object
- Define drop regions that react if the shadow overs over them.
- It should also be possible to transform the shadow if it hovers over a drop target. As my source objects are rather big (300x200px), but my drop targets are rather small, I want to shrink the shadow on hovering. I also want to be able to modify the drop target in this case. Sample: If I drag a file object over a folder object, I want this folder to open after some seconds of hovering.
- I want to implement the behaviours of the shadow and drop zones on my own, i.e. the framework should not be opiniated on this. I only need event hooks for that.
- All of this should run smoothly on mobile devices and hence support touch events as well as mouse events.
- It should also use HTML5 drag & drop, if supported by the browser, for best performance.
- Last but not least, it would be nice to have a “sortable” feature, so that the library can also be used to move items around in relation to sibling items, like “Sortable” does. But for my use-case, this is not a must-have, since there are a lot of libraries which are doing this well.
I’ve tried a lot of libraries, but none of them satisfied all of these criteria.
- Dragula came closest, but it is quite opinionated on how it treats the drop behaviour. It took me many “hacks” to simulate what I need (e.g. by setting dropped objects to display:none), and I don’t think these hacks are really good.
- interact.js is a great low-level framework for implementing such behaviour, but you have to implement a lot of the basic drag functionality yourself (like: generating shadow images, showing these objects while dragging etc.). If I should not find a decent out-of-the-box solution, I will surely go this way. I’m already using it to implement a tap-hold-behaviour.
- Dragabilly ran smooth, but it does not allow to copy the source item and move it freely on the page.
- Pep doesn’t seem to copy the source item either, but I haven’t tried this out in practice so far.
Thanks for any tips where to find good alternatives to those mentioned above.
EDIT: I’ve now also tested [ios-html5-drag-drop-shim] (https://github.com/timruffles/ios-html5-drag-drop-shim). Worked on iOS, but did break any interactivity with image-based buttons on Android Lollipop (if you enable this shim, all images become draggable, and all other events are prevented).