| ||Ask HN: Current best practice for drag-and-drop?|
41 points by couchand on Aug 19, 2014 | hide | past | web | favorite | 26 comments |
|I'm working on an application that makes heavy use of in-app drag-and-drop to categorize and update data. We aren't using the DnD for sorting or arbitrary item placement, nor do we support dropping files or other media for upload. We simply need to be able to drag a type of element and handle hovering and dropping on others of that type as well as their container. We also only need to support Firefox and Chrome.|
Originally it was built with HTML5 drag-and-drop, but we've started to see many issues, specifically in Chrome. For instance, previously we got a ghost image of the element for free in both Firefox and Chrome, but recently Chrome has reverted to a little gray box with the element text. We could use setDragImage, but since we're dragging plain old DOM elements that seems excessive. Chrome also seems to treat the dragEnter events strangely, making nested element hover handling difficult.
We could potentially implement a custom solution (the front-end is React, so it wouldn't be too hard) but that also seems excessive.
I'm about to add a dependency on jQuery and jQuery UI just to allow the use of their bulletproof Draggable and Droppable elements. Somehow that feels dirty. Is there a good, modern way to allow us to drag regular DOM elements and handle the hover and drop events? It doesn't seem like it should be this hard.
Registration is open for Startup School 2019. Classes start July 22nd.
| Apply to YC