
Draggable JS – a lightweight, responsive, modern drag-and-drop library - davidcornu
https://shopify.github.io/draggable/
======
cormacrelf
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
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.

~~~
mnutt
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
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
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
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.

------
mxstbr
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?!

~~~
CMay
Not sure why it matters that it's an open source project homepage? If treated
as a webpage in general among all other webpages, the design isn't that
special. It's not awful, but pushing a ton of deep blue in your face would not
be considered good design by many.

I appreciate the minimalism they're going for, the thick borders and that they
aren't afraid of color, but the blue is too much. This trend of one-page
fancy-scrolls grew from catering to mobile devices. On average, it seems like
their only goal is to avoid bad design on mobile and ignore all other devices.
These giant scrolling minimalist pages are often bad design on desktop,
mediocre design on tablets and ok design on mobile.

Do not forget that webpages at their core are about information design. I just
had to scroll almost 8 pages in order to read a few paragraphs and most of the
paragraphs didn't have the information that was interesting to me.

The page that really had the information I wanted was hidden behind a
"Contribute" button which makes no sense and you have to scroll all the way
back up to the top to get to if you've read down to the bottom.

The style it's going for is fine, but I'm not sold on it being good
information design for all devices, if any. :/

~~~
JoshMnem
> pushing a ton of deep blue in your face would not be considered good design
> by many.

Sorry to see that you're getting downvoted. Backlit, saturated colors like
that are really unpleasant for some people. Designers should take that into
account. Same goes for animation on pages that are meant to be read (another
trend which is definitely not accessible for many people).

(Other than the color intensity, the page is great.)

~~~
ellyagg
Everything is unpleasant for some people. Anyway, is good design that which
offends the least number of people? I can't agree with that.

~~~
JoshMnem
Would you argue that accessibility is not worth spending time on, because it
only affects a relatively small number of people?

~~~
WillPostForFood
Accessibility or " really unpleasant "? You are moving the goalposts.

~~~
JoshMnem
There is a gray area in there. Animation is an accessibility problem, even
when the result is only that the user can't use the website. Colors less so,
unless the contrast is low. Material Design has had really bad influence on
both animation and color saturation practices over the past couple of years so
I tend to group them together.

* [https://www.webaccessibility.com/best_practices.php?technolo...](https://www.webaccessibility.com/best_practices.php?technology_platform_id=11)

* [http://simplyaccessible.com/article/animations/](http://simplyaccessible.com/article/animations/)

------
harrisonjackson
Cute examples, but nothing useful as far as building out a drag and drop UI. I
assume this is being used on the Shopify template editor and not a new web
game engine they're working on... would love to see examples that are a bit
more practical.

It also took me a while to even realize the landing page was interactive. A
good DnD UI should make it clear to the user what pieces are interactive.

~~~
cyberferret
Same experience here - I scrolled up and down that page many times looking for
a 'Demo' link, and it was only by chance that I clicked and dragged a block
and realised "Oh, these block thingies are more than just decorative art!".

And to echo your other point - I am actually currently looking for a good drag
and drop library for our web app. I would really like to see a more 'boring'
demo which demonstrates some sort of Kanban board like functionality, dragging
images or text blocks between boxes. I also want to see ability to restrict
dropping or sorting etc. on a granular level.

The current 'demo' is cute, but not really translatable to my concept of what
I want. I am more likely to dismiss this library as a games engine rather that
something that could be used in an enterprise tool based on my experience to
date.

~~~
KitDuncan
[https://github.com/RubaXa/Sortable](https://github.com/RubaXa/Sortable)

This is what I am using. It's not perfect and was a pain in the ass to get
running with Vue.js, but now I am kinda happy and my clients are as well.

~~~
qiller
vue-draggable
([https://github.com/SortableJS/Vue.Draggable](https://github.com/SortableJS/Vue.Draggable))
is a nice wrapper on top of Sortable, didn’t have too many issues with it

~~~
KitDuncan
Yeah back when I started with my app, the wrapper didn't exist. Even now it's
not perfectly suited for my needs, so I am sticking with my solution.

------
stefco_
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, which was why I was excited to
see this library on HN. But given how many people out there have old hardware,
I would probably not use this library for anything but a personal project. It
absolutely doesn't need to be so slow on old hardware.

That said, I hope it continues to develop, and that the performance improves!
It certainly has a beautiful home page.

~~~
y4mi
dragula feels quicker to me.

[https://bevacqua.github.io/dragula/](https://bevacqua.github.io/dragula/)

~~~
punnerud
The page scroll when using it on iPhone

------
jordache
Why would they showcase the drag and drop coupled with this intriguing
isometric block UI? It really takes the focus away from the core functionality
of the library.

I was totally focused on how the blocks interact. It's not anywhere close to
the type of apps I build so the examples do not really give me a feel how well
it may work for typical CRUD use cases.

~~~
zeroxfe
> Why would they showcase the drag and drop coupled with this intriguing
> isometric block UI?

Because it looks and feels awesome!? :-)

Seriously though, I didn't think it took that much away from the core
functionally. I quite enjoyed testing the limits of the functionality with the
demo.

~~~
andyfleming
I really like the page, but I think that there could be a section with much
clearer real-world use cases would be helpful, especially if it showed the
actual syntax. There's not even a link to the documentation (though it's in
the README if you click "Contribute").

------
hoechst
I recently build a drag & drop feature for a customer with
[http://interactjs.io/](http://interactjs.io/).

The example page might not be as flashy, but it seems more reliable across
browsers.

~~~
andyfleming
How do both of these compare with
[https://github.com/bevacqua/dragula](https://github.com/bevacqua/dragula) ?

~~~
inertial
Dragula was great but maybe it's suffering from developer fatigue :
[https://github.com/bevacqua/dragula/pull/448#issuecomment-32...](https://github.com/bevacqua/dragula/pull/448#issuecomment-327244310)

------
atestu
I'm on Safari 11.0 (macOS 10.12.6) and none of it works…

~~~
the-hoff
Use force touch, unfortunately there was no time to add visual guidelines for
it. Let me know if it works

~~~
Yaggo
I'm a long time Mac user but didn't realized that my Macbook has force touch
functionality until now. Cannot see how 'force touch' adds any value, though.

~~~
usaphp
> Cannot see how 'force touch' adds any value, though.

I guess if you want to scroll the page instead of dragging elements - having
force touch helps distinguish two actions. I know it's different but in google
maps for example it's super annoying when instead of scrolling down the page -
the map iframe is trying to zoom out.

~~~
tobr
Not sure I follow, scrolling and dragging are two completely different
gestures? Overloading scroll to mean zoom is problematic, but that's not
happening here. You need to click "deeper" than usual for seemingly no reason.
Fwiw I also thought the page was broken in Safari, never used force touch
before on a website except to preview links.

~~~
usaphp
I was referring about the 3d touch on iPhones. Maybe safari on mac and on
iphone share something in them which makes 3d touch on iphone act like a force
touch on macs.

------
marak830
Maybe my phone is too old? Runs _horribly_ on Firefox/note3

Didn't even realize it was I teractive u til half way through when my phone
started spitting out audio then a second or two later I saw a block randomly
move(well bot randomly but no abim while it was catching up).

Tried to long press to slowly do something, still no joy.

Edit/note, I do look forward to seeing this on a PC though, judging from the
comments :-)

Edit: slightly older version of chrome did work better(although note the edge
report lower)

Edit 2: I was bored. No audio in brave browser :-p

~~~
eradicatethots
iPhone 7: [https://imgur.com/a/lRN88](https://imgur.com/a/lRN88)

~~~
marak830
Ouch. I'm guessing from our 3 reports it was only tested on desktop :-p

------
kccqzy
Breaks scrolling on mobile, if you happen to start a scroll at the wrong
place. I would be seriously pissed if I’m just trying to scroll but this thing
stopped me.

------
nik736
My eyes hurt. Even though I was just "looking" for something like that I can't
look at this landing page for more than 2 seconds :(

------
DoctorNick
I give up, how do I win this game?

~~~
lanius
I'm trying to move the pieces so that the lines are continuous along all the
faces with no dead ends. This would actually make a pretty fun minigame if it
was achievable.

------
ecommerceguy
I think, at least from a Shopify perspective, this will be used to drag items
to a cart. I forget where but I have seen drag-to-cart before, I believe in
some WooCommerce themes. Cool tech but not high on the list of things I look
for when testing a site.

~~~
phonon
Ummm, or as a visual editor component for the shop editor?

------
univerio
Is it just me, or is the I-bar cursor positioning off? The "point" seems to be
top-left corner (like a arrow cursor), when it should be the center.

Also, a typo:

> If you needed a feature that wasn’t already available, chances are the
> community needs it to.

------
eberkund
How does this compare to the current go-to library for this sort of behavior?

[https://github.com/RubaXa/Sortable](https://github.com/RubaXa/Sortable)

------
darepublic
Impressive work but a little buggy on my chrome android

------
bg0
Since we're talking about drag and drop. How does this work on scaled
containers ([https://stackoverflow.com/questions/39987643/accurate-
drop-f...](https://stackoverflow.com/questions/39987643/accurate-drop-for-
draggable-element-on-scaled-div))

------
twsted
I know the project and I know the difficulties to be cross-platform on HTML5
drag and drop. Unfortunately it does’t work on iOS 11.

------
nebabyte
> Let’s face it, its annoying when plugins get in the way of your personal
> design touch

Frankly I run into the converse problem far more; people's attempts to inflict
"their personal design touch" trying to disrupt my browsing. Thankfully, the
latter always wins out ;)

------
caymanbruce
It's fun. But question is what can I do with this? I have built a MMO game
with HTML5 canvas API but I still don't know how useful this library could be
other than casual gaming. Perhaps they are encouraging me to apply for a job
in shopify?

------
yellowapple
I was expecting the demo page to be a majorly-laggy CPU hog, as is the case
with most JS-heavy demo pages. I was pleasantly surprised to find that
everything runs smoothly (at least on Firefox; haven't tried Chrome yet).

------
hyuuu
wow this is a very polished site for a javascript library, I might just have
to use this, the marketing is working definitely. I usually don't like sound
effects on my web, but this one is very well executed

------
drewmol
on MacOS 10.12.6, Firefox 55.0.3: Great! Chrome 61.0.3163.100: Great! Safari
11.0: Great, no sound (could be my settings)

Super cool, thanks for sharing!

Bonus points: fully functional w/o having to any change uMatrix or uBlock
settings!

------
kangnkodos
When I scroll down to the "Interaction" section of their home page, and let
the blocks move for a few seconds, the music from my Spotify app turns to
static. Every time.

Latest Chrome on Windows desktop.

------
weaksauce
neat library.

somewhat off topic: took me a bit to figure out where the project was since
"download" was the main go to action and to me contribute sounded like they
were asking for money. I was initially disappointed because download offered
up a zip file and I wanted to use a package manager. Contribute code or github
repo or perhaps installation instructions and documentation might be a better
way to phrase the second button.

------
nulagrithom
Definitely some bugs in the Collidable section on Firefox 55.0.3 (macOS). I
ended up duplicating a block twice. They were stuck on my screen and followed
scroll.

Neat library though!

~~~
chrismorgan
In Firefox Nightly on Windows I quickly got the Swappable section confused
with touch, just from tapping and dragging things around a little. And after
reloading the page Sortable fell apart on my very first touch-and-drag. Yeah,
despite being pretty cool it seems unusably buggy at present.

That touching to scroll stops working if you’re in an area where there are
things to drag is also super annoying.

------
ataspinar
Why does playing around with the block below "Interaction" also mute the sound
of videos playing in other tabs? (Chrome browser)

------
geetfun
In an ironic twist, I was playing around with this and switching tabs trying
to check out on a Shopify store, and my browser crashed.

------
wozz
I prefer to write custom code for these types of behaviors, it's a lot easier
to get exactly what you want.

------
earlybike
More impressive than the actual lib are the examples, I was dragging and
dropping for minutes to connect those lines.

------
SurrealSoul
At first I thought "oh no, not another one" but then I thought "These are
really vivid colors"

------
tuespetre
It's cool and pretty but the isometric demo was easily broken with multitouch.

------
kylecazar
Very cool! Lots of negativity here, but I thought it was a neat demo.

------
chenster
One of the best Js demos I've ever seen!

