Draggable JS – a lightweight, responsive, modern drag-and-drop library
shopify.github.io
shopify.github.io
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.
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.
I would really like to see support for mouse events in react-dnd.
As for this issue, try to find their code that detects dragstart and and mousedown to it
Any other entries that even come close?!
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. :/
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'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.
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.)
* https://www.webaccessibility.com/best_practices.php?technolo...
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.
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.
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.
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.
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 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.
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.
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.
The example page might not be as flashy, but it seems more reliable across browsers.
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.
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
Also, a typo:
> If you needed a feature that wasn’t already available, chances are the community needs it to.
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 ;)
Super cool, thanks for sharing!
Bonus points: fully functional w/o having to any change uMatrix or uBlock settings!
Latest Chrome on Windows desktop.
Neat library though!
That touching to scroll stops working if you’re in an area where there are things to drag is also super annoying.
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.