4 ms·

Dragula: Drag and drop so simple it hurts

104 points by bevacqua 10y ago

brudgers 10y ago
If it meets the guidelines, this might make a good 'Show HN'. Show HN guidelines: https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html
- guessmyname 10y ago
  As far as I know "Show HN" is only for new-ish projects, Dragula is like 2 years old [1]. EDIT: Notice that the guidelines say "New features and upgrades ("Foo 1.3.1 is out") generally aren't substantive enough to be Show HNs. A major overhaul is probably ok.". The latest commit in this repository is from Sep 12, there has not been a significant release so if we want to stick to the "rules" this post should actually be deleted, but then people will say "Oh! But this is the first time I see this project, yada yada" that is why it got upvoted, because there is still people new to this library. Not that I am complaining, just saying that there is nothing noteworthy today about this project that requires a "Show HN" tag. I suppose the author posted this the +10th time simply because he does not wants his project to be forgotten, which is fine I guess. [1] https://hn.algolia.com/?query=https://github.com/bevacqua/dragula https://hn.algolia.com/?query=https://github.com/bevacqua/dr... [2] https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html
  - pvg 10y ago
    It isn't: https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html Just has to be an author.
ww520 10y ago
How is it compared to JQuery's Draggable and Droppable?
- visarga 10y ago
  Those are nice too but don't hurt as much.
LoSboccacc 10y ago
tested on ipad and reordering doesn't work because the page scrolls with you. probably more an issue with the demo than the lib itself. apart from that I don't really like the fixed object list or callback to define which nodes can and cannot accept stuff, I find more pleasant to maintain the interact.js approach of using classess (and they do work on mobile out of the box)
WikipediasBad 10y ago
This looks really interesting wow!! We might give this a try out our startup that me and a friend are doing. We need a type of script that would help users drag and move around pictures/gifs in large blocks of text so they can get the perfect desired placement of the media inside their text document to build rich documents that have animations in them I wonder if Dragula would be good for that type of useage? The demo does not really show any situation aside from moving around text based divs around. Does it work just as well for moving around pics/gifs in a thick text document? Our startup has around 1-2m users/month for reference.
- geektips 10y ago
  Take a look at Fabricjs
Bahamut 10y ago
I actually have some experience using this via angular-dragula (https://github.com/bevacqua/angular-dragula https://github.com/bevacqua/angular-dragula) - it mostly works for us for Angular 1, but when we started doing more complex interactions in a prototype, it showed its warts quickly with model bugs. This library ends up doing basic things pretty nicely, but being able to do more complex interactions like stacking multiple selected items becomes impossible to do right. In our current app my team is working on (Angular 2), I ended up homebrewing selection and drag & drop modules, which I hopefully will take the time to open source at some point when things slow down. It was an interesting exercise, with some work for getting the UX done right (some aspects such as what should happen when the user drags a little on the mouse while holding it down - just dragging as soon as the mousedown event occurs is no good because it turns out users typically will move the mouse a little when pressing the mousedown for a click). It made me appreciate any site that implements non-trivial drag and drop, it is not an easy interaction to get right.
deleted 10y ago
[deleted]

104 points by bevacqua 10y ago

If it meets the guidelines, this might make a good 'Show HN'. Show HN guidelines: https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html

guessmyname 10y ago
As far as I know "Show HN" is only for new-ish projects, Dragula is like 2 years old [1]. EDIT: Notice that the guidelines say "New features and upgrades ("Foo 1.3.1 is out") generally aren't substantive enough to be Show HNs. A major overhaul is probably ok.". The latest commit in this repository is from Sep 12, there has not been a significant release so if we want to stick to the "rules" this post should actually be deleted, but then people will say "Oh! But this is the first time I see this project, yada yada" that is why it got upvoted, because there is still people new to this library. Not that I am complaining, just saying that there is nothing noteworthy today about this project that requires a "Show HN" tag. I suppose the author posted this the +10th time simply because he does not wants his project to be forgotten, which is fine I guess. [1] https://hn.algolia.com/?query=https://github.com/bevacqua/dragula https://hn.algolia.com/?query=https://github.com/bevacqua/dr... [2] https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html
- pvg 10y ago
  It isn't: https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html Just has to be an author.

ww520 10y ago

How is it compared to JQuery's Draggable and Droppable?

visarga 10y ago
Those are nice too but don't hurt as much.

LoSboccacc 10y ago

tested on ipad and reordering doesn't work because the page scrolls with you. probably more an issue with the demo than the lib itself. apart from that I don't really like the fixed object list or callback to define which nodes can and cannot accept stuff, I find more pleasant to maintain the interact.js approach of using classess (and they do work on mobile out of the box)

WikipediasBad 10y ago

This looks really interesting wow!! We might give this a try out our startup that me and a friend are doing. We need a type of script that would help users drag and move around pictures/gifs in large blocks of text so they can get the perfect desired placement of the media inside their text document to build rich documents that have animations in them I wonder if Dragula would be good for that type of useage? The demo does not really show any situation aside from moving around text based divs around. Does it work just as well for moving around pics/gifs in a thick text document? Our startup has around 1-2m users/month for reference.

geektips 10y ago
Take a look at Fabricjs

Bahamut 10y ago

I actually have some experience using this via angular-dragula (https://github.com/bevacqua/angular-dragula https://github.com/bevacqua/angular-dragula) - it mostly works for us for Angular 1, but when we started doing more complex interactions in a prototype, it showed its warts quickly with model bugs. This library ends up doing basic things pretty nicely, but being able to do more complex interactions like stacking multiple selected items becomes impossible to do right. In our current app my team is working on (Angular 2), I ended up homebrewing selection and drag & drop modules, which I hopefully will take the time to open source at some point when things slow down. It was an interesting exercise, with some work for getting the UX done right (some aspects such as what should happen when the user drags a little on the mouse while holding it down - just dragging as soon as the mousedown event occurs is no good because it turns out users typically will move the mouse a little when pressing the mousedown for a click). It made me appreciate any site that implements non-trivial drag and drop, it is not an easy interaction to get right.

deleted 10y ago

[deleted]