Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

shopify.github.io

Post reply on HN
Print view View original

61–70 of 122 posts

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

#61

Post by murukesh_s »

cyberferret wrote: post #54
harrisonjackson wrote: post #19

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…

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.

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

#62

Post by joeax »

jordache wrote: post #29

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.

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

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

#63

Post by phonon »

ecommerceguy wrote: post #35

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?

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

#65

Post by qiller »

KitDuncan wrote: post #58
cyberferret wrote: post #54

Earlier quoted context omitted.

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…

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

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

#66

Post by jaquers »

CMay wrote: post #60
mxstbr wrote: 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?!

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

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

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

#67

Post by nv-vn »

marak830 wrote: post #5

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 :-)…

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

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

#68

Post by ehnto »

harrisonjackson wrote: post #19

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.

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.

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

#69

Post by ehnto »

KitDuncan wrote: post #58
cyberferret wrote: post #54

Earlier quoted context omitted.

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…

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.

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.

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

#70

Post by ehnto »

jordache wrote: post #29

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.

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.

Post reply on HN