4 ms·

I've been using react-dnd in my app, and it has taught me a lot about good software design. The architecture is really beautiful and powerful, but I'm finding i

I've been using react-dnd in my app, and it has taught me a lot about good software design. The architecture is really beautiful and powerful, but I'm finding it very hard use. The HTML5 drag/drop backend also has some serious limitations. The main thing is that HTML drag/drop can't start a drag as soon as you click the mouse. It always waits until you drag the item at least 5 pixels in any direction. And then it sometimes flickers, or shows the green + icon for a few ms. I haven't found a way to solve this problem in react-dnd which makes the whole experience feel clunky and unresponsive. This is a big UX problem in my app, because I need to able to drag things by 1px to make precise adjustments. I would probably stick with react-dnd if there was a plain JS/DOM backend that gave more control and precision, but I haven't been able to find that. EDIT: Here's my issue on react-dnd - https://github.com/react-dnd/react-dnd/issues/861 https://github.com/react-dnd/react-dnd/issues/861 I do like how it comes with pluggable backends. I'm tempted to work on a new JS backend so that I can start the drag immediately on mousedown. It might be less work than replacing everything with this new Shopify library.

ykler 9y ago
The Draggable JS homepage doesn't have this problem. Is this because it doesn't use HTML5 drag/drop at all?
- nathan_f77 9y ago
  They have the option to use the the native HTML5 drag and drop API, but it is disabled by default, and they use mouse events instead. See the 'native' option: https://github.com/Shopify/draggable#options https://github.com/Shopify/draggable#options I would really like to see support for mouse events in react-dnd.
mnutt 9y ago
It's possible that the 5px threshold is intentional, to prevent accidental drags while trying to click a draggable object. I've seen that happen particularly with users who have touchpads.
- nathan_f77 9y ago
  Yes I can see why it's a good idea in general, but it's unsuitable for any CAD applications, where you need precise control over the position of graphics or text.
  - colanderman 9y ago
    In the vector graphics world there is the notion of "nudging" with the arrow keys. This way you can make fine adjustments without zooming in, and you don't have to worry about sloppy clicks accidentally moving things 1 px.
    - nathan_f77 9y ago
      Oh yes, I have support for that too. Also Shift+arrow key to nudge a larger distance. But I just switched to a "mouse backend" for react-dnd (instead of the native drag and drop), and it does feel a lot nicer to use.
baybal2 9y ago
DnD and MVC frameworks do not mix well. As for this issue, try to find their code that detects dragstart and and mousedown to it
nathan_f77 9y ago
EDIT: Someone already wrote a mouse backend for react-dnd [1], and it seems to work really well so far. Problem solved! [1] https://github.com/zyzo/react-dnd-mouse-backend https://github.com/zyzo/react-dnd-mouse-backend
Bahamut 9y ago
That sounds flawed - IMO the UX should be time based, not pixel based. It turns out when users click, it's often very easy for them to drag their mouse while doing it, 5 pixels sounds like it could still be prone to accidental drags.

ykler 9y ago

The Draggable JS homepage doesn't have this problem. Is this because it doesn't use HTML5 drag/drop at all?

nathan_f77 9y ago
They have the option to use the the native HTML5 drag and drop API, but it is disabled by default, and they use mouse events instead. See the 'native' option: https://github.com/Shopify/draggable#options https://github.com/Shopify/draggable#options I would really like to see support for mouse events in react-dnd.

mnutt 9y ago

It's possible that the 5px threshold is intentional, to prevent accidental drags while trying to click a draggable object. I've seen that happen particularly with users who have touchpads.

nathan_f77 9y ago
Yes I can see why it's a good idea in general, but it's unsuitable for any CAD applications, where you need precise control over the position of graphics or text.
- colanderman 9y ago
  In the vector graphics world there is the notion of "nudging" with the arrow keys. This way you can make fine adjustments without zooming in, and you don't have to worry about sloppy clicks accidentally moving things 1 px.
  - nathan_f77 9y ago
    Oh yes, I have support for that too. Also Shift+arrow key to nudge a larger distance. But I just switched to a "mouse backend" for react-dnd (instead of the native drag and drop), and it does feel a lot nicer to use.

baybal2 9y ago

DnD and MVC frameworks do not mix well. As for this issue, try to find their code that detects dragstart and and mousedown to it

nathan_f77 9y ago

EDIT: Someone already wrote a mouse backend for react-dnd [1], and it seems to work really well so far. Problem solved! [1] https://github.com/zyzo/react-dnd-mouse-backend https://github.com/zyzo/react-dnd-mouse-backend

Bahamut 9y ago

That sounds flawed - IMO the UX should be time based, not pixel based. It turns out when users click, it's often very easy for them to drag their mouse while doing it, 5 pixels sounds like it could still be prone to accidental drags.