4 ms·

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 e

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 9y ago
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 9y ago
  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 9y ago
    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 9y ago
      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.
  - ehnto 9y ago
    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.
- murukesh_s 9y ago
  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.
ehnto 9y ago
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.

cyberferret 9y ago

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 9y ago
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 9y ago
  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 9y ago
    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.
- ehnto 9y ago
  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.
murukesh_s 9y ago
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.

ehnto 9y ago

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.