3 ms·

I'm surprised nobody has mentioned react-dnd (http://react-dnd.github.io/react-dnd/ http://react-dnd.github.io/react-dnd/) in this thread yet. This library bein

I'm surprised nobody has mentioned react-dnd (http://react-dnd.github.io/react-dnd/ http://react-dnd.github.io/react-dnd/) in this thread yet. This library being 'modular' or 'extensible' has nothing on what you can express when you stop dealing with the DOM directly, which is the real definition of 'modern drag and drop'. The demos on Draggable JS, while pretty and colourful, are not nearly as cool as the GIFs in this collection of real-world react-dnd uses - https://github.com/react-dnd/react-dnd/issues/384 https://github.com/react-dnd/react-dnd/issues/384 - particularly note the comments about the right level of abstraction, and being better than an 'awkward combination of isolated, one-size-fits-all drag components' like we see here. Since it's built on an abstraction of HTML5 drag/drop ('backend') and an isolated state manager (dnd-core), I implemented the frontend again in Angular in the last two days. Just wires things up in an almost-compatible way. Will publish soon. Nobody has really put their mind yet to multi-touch and force-touch on it, but I can't see how that's really useful on the web where you can't pick and choose your user's device capabilities and nobody expects to be able to do it.

nathan_f77 9y ago
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.

nathan_f77 9y ago

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.