Hacker News new | past | comments | ask | show | jobs | submit login
Draggable JS – a lightweight, responsive, modern drag-and-drop library (shopify.github.io)
633 points by davidcornu on Sept 29, 2017 | hide | past | web | favorite | 114 comments



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.


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.


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.


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.


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.


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.


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


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.


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.


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


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


Agreed. Haters going to hate. This is art. Thank you.


It looks ok, but "art" is a bit of an overstatement. It looks like something you could find in a toys store.


Yep, also those subtle sound effects make it really enjoyable to just drag & drop those blocks for fun


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. :/


> 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.)


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


The measure of good design depends on the purpose of your content. In some cases it may very well be a design that offends the fewest.


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


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


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

* http://simplyaccessible.com/article/animations/


> Do not forget that webpages at their core are about information design.

I believe your are confusing web pages with graphic design. A graphic designer's job is based in information architecture. Webpages were originally designed for simple document sharing, however since '96 - we still have some simple documents, but we also have non-trivial games, and extremely complex applications that run businesses.

This open source project happens to be for the mid to latter, so it seems appropriate then that they actually demo some of the features of the library. Also, one could make the argument that a beautiful design can inspire another developer to make something beautiful. API's are often pretty dull. I find this design to be delightful.

BTW, you can always use shortcuts provided by your browser/OS. Tap in the header on mobile, press "Home" on Windoze, and Cmd+Up on Mac.


> I believe your are confusing web pages with graphic design.

I'm not. I remember the times of Bulletin Board Systems you had to dial into and then the transition to the popularity of the web. It has always been about navigating information. Sometimes the information is art. Sometimes the information is the interactivity itself. Most of the time the information is text. Once people realized that packaging was important, just like a hardback book with a wonderful cover and table of contents versus a manuscript-like stack of impenetrable pages, it became a matter of business. Nobody says a book can't have pop-up cut-outs that unfold when you open a page, but whatever the quality of a book is, it can be measured.

What I'm saying is that, I can appreciate what this webpage is doing, but I also would not say that it is a fantastic example of web design.

> Also, one could make the argument that a beautiful design can inspire another developer to make something beautiful. API's are often pretty dull. I find this design to be delightful.

My complaints with it should be possible to fully resolve while maintaining every one of those qualities you like about it.

> BTW, you can always use shortcuts provided by your browser/OS. Tap in the header on mobile, press "Home" on Windoze, and Cmd+Up on Mac.

I am aware of that, but often people are navigating mostly with the mouse and requiring the user to move their hand away from the mouse isn't user friendly. There is a human in front of the machine. It isn't just about the capabilities of the machine. Proper design is about the complete stack, including the biological part of it.

I don't mind if other people like a page. My concern is that people take it as excellent design that should be replicated, including its faults. If someone reads these comments and appreciates that, maybe it will do some good.


It's a very very nice design. A tiny tiny amount of the brutalism trend but with a comfy spirit. Surprising.


Wow, doesn't even work on mobile.


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.


Certainly the best I have seen.


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.


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.


If you want to target legacy browsers and don't mind download size, it's better to stick with jqueryui if you can. I have used combination of jqueryui and jsplumb to accomplish similar real world web apps. Jqueryui is pretty old school and too heavy(size), but lets you get the job done quickly. It also can expand beyond drag and drop into sortable and provide extensive customisation support via hooks to go beyond the out-of-the-box features. Because it's very mature there are tons of help and practical examples available both in their site and in stack oveflow / jsfiddle.


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.


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


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.


I used this as well. Very impressed. Upon revisiting thr site that I built with it I have noticed chrome no long stops scrolling whike you are dragging an element on mobile. So that's a bummer.


I'm not sure what about it isn't useful? Having implemented something like this previously and trying to wrestle with the native drag and drop API this is a huge win. The different interactions needed are all in the demo.


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.


dragula feels quicker to me.

https://bevacqua.github.io/dragula/


The page scroll when using it on iPhone


My Samsung s8 seems to have a noticeable delay on the sample app.


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 stand by my earlier point: I'm probably not a total edge case, and if I were designing a tool designed for the public at large, I wouldn't assume that all or even most of my users are on recent, well-maintained computers running recent browser versions. I know people outside of the dev world who (shudder) still run OS X Mavericks and haven't installed a single update in years. People like this will probably use your app, and unless you want them to think it's trash, you have to make it feel snappy.


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).


I actually agree about their software quality but I worry about software compatibility and unpatched vulns, and I like a few recent features, like icloud notes. So I upgrade. But I prefer the old ones in a lot of ways too.


Hmm works fine for me on mid 2013 mbpro


It's instant on my phone


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.


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


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").


My takeaway was that they wanted to show that anything can be made draggable, i.e. isometric blocks created using CSS transforms. The browser actually maps mouse/touch events from the transformed space back to the untransformed cartesian x,y point. In other words, if I scale a 100x100 <div> 3x then hover exactly in the center of it, I'll get 50,50 regardless of the scale/skew/rotation/matrix. This is really useful for collision detection, which they are trying to demo.


I am really surprised at the backlash toward the demo. It's simple and fun. Dragging and dropping is a pretty simple concept anyway, you're going to have to build your logic into it.

The reason this is cool is because cross browswer drag and drop is difficult with the native APIs. Not having to deal with them for basic drag and drop is great and likely the point of the library.


I recently build a drag & drop feature for a customer with http://interactjs.io/.

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


While not as beautiful, your library is a lot more performant to be sure. After throttling my CPU by 6x, everything still felt really smooth with interactjs, while Shopify's lib began to choke. There are pretty big differences though. Shopify offers swapping and sorting, and even supports feature like force touch.


How do both of these compare with https://github.com/bevacqua/dragula ?


Dragula was great but maybe it's suffering from developer fatigue : https://github.com/bevacqua/dragula/pull/448#issuecomment-32...


This works much better in my Android phone (Nexus 5 with chrome dev) than the OP


Your example is not running smooth for me, it has a slight delay when moving elements.


Any chance you know if interactjs works properly with shadow DOM?


No idea, sorry.


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


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


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.


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


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.


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.


Force click to preview a link is really awesome


Force touch works, but why is the interaction different from other browsers?


unfortunately, force touch is not supported by all Macs. it's unfortunate that this doesn't work in the battery-saving browser of choice for a lot of people (myself included), because the website is gorgeous.


ooooh got it, thanks. Not used to using force touch on the web.


That's because Safari is the new IE



+1


Thats odd. I'm on Safari 11.0 (build 12604.1.38.1.7) on MacOS 10.12.6 and it all works


You're meant to enjoy the animals and sightseeing on a Safari! What are you doing on the Internet!


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


It does not work well on Microsoft Edge too. It is a bit is sluggy and touch support seems non-existent (or not working because it scrolls the page too).



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


Are there any sites out there that have a good drag/drop experience on mobile?


Damnit, now I want to see if I can code one. I really don't have time :-p


Running terribly on Firefox for Android here as well, but really smooth in whatever browser my HN app uses (I assume Chrome). That said, the Chrome(?) version kept dropping blocks early and Firefox was more accurate...


Broken in SAMSUNG S8 chrome: https://pasteboard.co/GMHO2oY.png


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.


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 :(


I give up, how do I win this game?


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.


Ok, I am glad I am not the only one who tried to 'win' XD


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.


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


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.


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

https://github.com/RubaXa/Sortable


Impressive work but a little buggy on my chrome android


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


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.


> 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 ;)


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?


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).


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


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!


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.


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.


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!


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.


Same on latest ios Chrome.


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


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.


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


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


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


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


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


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




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: