5 ms·

Anyone know a good drag and drop solution for JS/HTML? I've been having a hell of a time building a magic the gathering sandbox. I've got a ton of experience bu

Anyone know a good drag and drop solution for JS/HTML? I've been having a hell of a time building a magic the gathering sandbox. I've got a ton of experience building UIs but this turned out to be more complicated than anticipated. I've got it working smoothly but I am in no way proud of my code. Super brittle. Basically resorted to a pub-sub system that works like so: 1.) mouseDown on a draggable component causes a global onMouseMove handler to be turned on, so that moving your mouse moves the component. 2.) mouseUp fires a drop event through the pubsub system with the data of which card was being dragged. 3.) Various instances of a dropzone component are subscribed to that event, and they compare the coordinates of the event with their own to see if they are where the card was dropped. 4.) If the coordinates match, a call to the server is made adding the card to that location and removing it from its original location. That's the basic flow. A ton of complexity has arisen around it. I just couldn't find a better way.

wildrhythms 5y ago
I ran into these same issue trying to roll my own solution. The native drag and drop "works", but doesn't let me customize the drag ghost. I ended up using React DnD https://github.com/react-dnd/react-dnd/ https://github.com/react-dnd/react-dnd/
n0w 5y ago
Are you not able to use the Drag & Drop API? https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a...
- aerovistae 5y ago
  No, it's extremely limited. It doesn't really let you properly drag things like you would in a card game - just ghosts of them.
  - melony 5y ago
    Also note that the default drag and drop API doesn't support touch enabled devices.
c0balt 5y ago
I used Dragula[^1] for a form builder in the past and had quit a pleasent experience. Though I don't know how it would hold with a drag centric (card game) UI [1]: https://bevacqua.github.io/dragula/ https://bevacqua.github.io/dragula/
pupdogg 5y ago
I’m a big fan of Uppy @ https://uppy.io https://uppy.io. I’m not sure if you’ve given that a spin yet?
- wildrhythms 5y ago
  It sounds like they're looking for some generic/general drag-drop API; not specifically file uploading.
whichdan 5y ago
As far as I've seen, that's really the only way. Maybe with a slight throttle for the onMouseMove handler if the performance isn't great. I wonder if a different UX would help? Like clicking on a card and clicking on the drop target instead of dragging it? It would be less tactile but also a lot nicer on a trackpad.
- wildrhythms 5y ago
  In a previous project I needed to customize the look of the "drag ghost", so I set up a global state for <thing being dragged>, and used requestAnimationFrame to move the ghost around with the cursor. Drop-enabled elements would then listen for mouseup and check to see if something was being dragged. Lots of weird edge cases (what if the user moves the cursor off-screen?), so now I recommend using a library like React DnD or Dragula.
deleted 5y ago
[deleted]
tiberriver256 5y ago
https://shopify.github.io/draggable/ https://shopify.github.io/draggable/

wildrhythms 5y ago

I ran into these same issue trying to roll my own solution. The native drag and drop "works", but doesn't let me customize the drag ghost. I ended up using React DnD https://github.com/react-dnd/react-dnd/ https://github.com/react-dnd/react-dnd/

n0w 5y ago

Are you not able to use the Drag & Drop API? https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a...

aerovistae 5y ago
No, it's extremely limited. It doesn't really let you properly drag things like you would in a card game - just ghosts of them.
- melony 5y ago
  Also note that the default drag and drop API doesn't support touch enabled devices.

c0balt 5y ago

I used Dragula[^1] for a form builder in the past and had quit a pleasent experience. Though I don't know how it would hold with a drag centric (card game) UI [1]: https://bevacqua.github.io/dragula/ https://bevacqua.github.io/dragula/

pupdogg 5y ago

I’m a big fan of Uppy @ https://uppy.io https://uppy.io. I’m not sure if you’ve given that a spin yet?

wildrhythms 5y ago
It sounds like they're looking for some generic/general drag-drop API; not specifically file uploading.

whichdan 5y ago

As far as I've seen, that's really the only way. Maybe with a slight throttle for the onMouseMove handler if the performance isn't great. I wonder if a different UX would help? Like clicking on a card and clicking on the drop target instead of dragging it? It would be less tactile but also a lot nicer on a trackpad.

wildrhythms 5y ago
In a previous project I needed to customize the look of the "drag ghost", so I set up a global state for <thing being dragged>, and used requestAnimationFrame to move the ghost around with the cursor. Drop-enabled elements would then listen for mouseup and check to see if something was being dragged. Lots of weird edge cases (what if the user moves the cursor off-screen?), so now I recommend using a library like React DnD or Dragula.

deleted 5y ago

[deleted]

tiberriver256 5y ago

https://shopify.github.io/draggable/ https://shopify.github.io/draggable/