6 ms·

From experience writing an app with loads of complex DnD, I strongly recommend giving up on DnD libraries if you are doing anything beyond some generic sortable

From experience writing an app with loads of complex DnD, I strongly recommend giving up on DnD libraries if you are doing anything beyond some generic sortable list thing. You will never get the library to do what you want it to do, and even if you get close, the performance will be fucking abysmal, for reasons that become obvious when you've programmed your first DnD interaction by hand. It's just not something a library can reasonably handle, because to cover multiple use cases they have to put loads of conditional logic inside a mousemove listener, which kills performance. DnD interactions are very application-specific; to me the term DnD refers to a class of problems and a corresponding skill set, not a feature that you can delegate away. And as you have discovered, the HTML5 DnD API is a pile of shit. Do not fear making your own drag interactions from raw mouse events. I avoided it for ages, then discovered it is easier than I expected, and satisfying because what you produce is so much better quality. It's just combinations of mousedown, mousemove, mouseenter, mouseleave, and mouseup, and the confidence to attach/detach listeners for those events on the fly during the interaction. Also by thinking about the whole event sequence on a lower level you will often realise a better way to design the UX of the interaction.

couchand 12y ago
Thanks for the support. Eventually I think this is the way we'll go. For the time being I'm putting up with dropping in jQuery UI, but I think my next big project will be a few React mixins for UI interactions like this.
- callum85 12y ago
  My comment earlier was a bit strong; there are obviously cases when you just need to get the job done, and if jQuery UI covers your use case with an acceptable perf hit then go with it. If you want a halfway house, I've just remembered this little jQuery plugin, not well known at all, but it is the best thing available: http://threedubmedia.com/code/event/drag http://threedubmedia.com/code/event/drag For me this plugin was a bridge between using DnD libraries and writing raw mouse listeners. It basically just fires off events at key points during a drag sequence, and it's up to you to update element styles to move them around... ie, you can't see anything physically happening on the page unless you update the DOM yourself (not difficult). It's basically sugar around mouse events to make them a lot less intimidating, eg, on each move it gives you the mouse position relative to wherever the drag started, so you don't have to keep track of this yourself. Compared to any regular DnD library, it's better performing and miles more flexible. It's almost as good as doing it with raw mouse events. Look at the demos and view the code, they are impressive. It's old though. Hope it still works with modern jQuery.

couchand 12y ago

Thanks for the support. Eventually I think this is the way we'll go. For the time being I'm putting up with dropping in jQuery UI, but I think my next big project will be a few React mixins for UI interactions like this.

callum85 12y ago
My comment earlier was a bit strong; there are obviously cases when you just need to get the job done, and if jQuery UI covers your use case with an acceptable perf hit then go with it. If you want a halfway house, I've just remembered this little jQuery plugin, not well known at all, but it is the best thing available: http://threedubmedia.com/code/event/drag http://threedubmedia.com/code/event/drag For me this plugin was a bridge between using DnD libraries and writing raw mouse listeners. It basically just fires off events at key points during a drag sequence, and it's up to you to update element styles to move them around... ie, you can't see anything physically happening on the page unless you update the DOM yourself (not difficult). It's basically sugar around mouse events to make them a lot less intimidating, eg, on each move it gives you the mouse position relative to wherever the drag started, so you don't have to keep track of this yourself. Compared to any regular DnD library, it's better performing and miles more flexible. It's almost as good as doing it with raw mouse events. Look at the demos and view the code, they are impressive. It's old though. Hope it still works with modern jQuery.