Live data from Hacker News

Draggable JS – a lightweight, responsive, modern drag-and-drop library

shopify.github.io

91–100 of 122 posts

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#91
post #3

This website is absolutely incredible, wow! It might well be the most beautiful open source project homepage out there. Any other entries that even come close?!

It would be perfect except it plays sound when I'm not expecting it to and that's an instant navigate away for me.

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#92
I'm surprised nobody has mentioned 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 - 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.

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#93

I'm surprised nobody has mentioned 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-dn…

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

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.

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#94
post #83

Earlier quoted context omitted.

seems instant on my machine in chrome and the firefox beta. you using safari?

MacBookPro7,1 (mid-2010) in Chrome! It's definitely slower than new computers, but usually I don't have trouble with nice JS libraries unless a page is drowning me in tracking software. Just tried it in safari, and it was equally slow (subjectively speaking). Let me give Firefox Quantum a whirl... EDIT: It's actually usable in the newest Firefox! Still kind of slow, but significantly better than Chrome or Safari. But…

I'm a dev and I still run Mavericks. For a while I have felt like Apple's software is getting worse and worse, so I haven't updated. I don't use Safari though, so my browser is modern (the new Firefox actually).

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#95
post #3

This website is absolutely incredible, wow! It might well be the most beautiful open source project homepage out there. Any other entries that even come close?!

It would be perfect except it plays sound when I'm not expecting it to and that's an instant navigate away for me.

When does it do that? Scrolled down and interacted with the whole page, no sounds for me.

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#96
post #89
post #77

I wouldn't call this "lightweight". Every action has about a second of lag on my laptop. I know that my 7 year old MacBook is slower than a lot of machines that are going to run this, but there are plenty of slower machines out there, and I don't usually find web experiences unusable on this thing. I've built several canvas-based interactive drag-and-drop applets that ran faster than this on my laptop. It was a pain,…

dragula feels quicker to me. https://bevacqua.github.io/dragula/

The page scroll when using it on iPhone

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#97

Earlier quoted context omitted.

It would be perfect except it plays sound when I'm not expecting it to and that's an instant navigate away for me.

When does it do that? Scrolled down and interacted with the whole page, no sounds for me.

When you click on the draggable items, there is a sound being played.

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#98

I'm surprised nobody has mentioned 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-dn…

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 som…

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

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#99

I'm surprised nobody has mentioned 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-dn…

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 som…

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.

Re: Draggable JS – a lightweight, responsive, modern drag-and-drop library

#100
post #98

Earlier quoted context omitted.

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 som…

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

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

I would really like to see support for mouse events in react-dnd.

Post reply on HN