
Dragula: Simple drag and drop - bevacqua
https://github.com/bevacqua/dragula/blob/master/readme.markdown
======
krat0sprakhar
If you're using React and need DnD in your app, Dan Abramov's library is the
bee's knees - [http://gaearon.github.io/react-
dnd/](http://gaearon.github.io/react-dnd/)

I've been using it exclusively in a complex react app[0] for the past 3 months
and I have absolutely no complaints whatsoever.

[0] - [https://github.com/prakhar1989/react-
surveyman](https://github.com/prakhar1989/react-surveyman)

------
SeanAnderson
Erm...

I tried out your demo page and (literally!) the first thing I did had a bug in
it. Just bad luck?

There's an off-by-one error while dragging an item from the left container to
the right container, but only when my mouse has just entered the right box. If
I continue dragging my mouse horizontally then the item's drop placeholder
corrects itself.

Screencast:
[http://screencast.com/t/Jw3No0wryqJ](http://screencast.com/t/Jw3No0wryqJ)

~~~
usaphp
Screencast requires flash player :( I wish the day where I can forget about
flash player will be gone soon...I want to watch your screencast but Adobe
won't trick me into installing their malware again...

~~~
SeanAnderson
Do you have an alternative website which provides free video hosting? I just
use this because Jing is a free/simple screen capturing utility.

~~~
andrepd
Try [http://www.streamable.com](http://www.streamable.com)

------
babby
How does this compare to Sortable?

[https://github.com/RubaXa/Sortable](https://github.com/RubaXa/Sortable)

~~~
lancefisher
Sortable's animations were janky for me on an iPad Air. Dragula was nice and
smooth.

~~~
onli
Here in my FF, they are smooth, but they make it feel very slow (at least I
think it's the animations that cause this impression). I hope they are
configurable, saw nothing in the readme, but I probably just missed it.

------
Leftium
Cool. Does Dragula support nested containers?

I've been looking for a library that supports nested containers. For an
example of drag and drop with nested containers see
[https://www.bkmks.com/](https://www.bkmks.com/)

~~~
LoSboccacc
I'd suggest interactjs.io been using it and works like a champ

------
lux
This looks really easy to use!

A tree mode would be awesome, where you can drag elements to be children of
other elements as well as siblings.

------
usaphp
It looks great! I would suggest adding an option of a delayed event, this way
if you want to trigger a drag event you have to hold pressed for a second or
so, this way it won't interact with touch scroll events of my phone

~~~
bevacqua
Author here. There's actually a way to do that. There's a `delay` option you
can use so that click events get through.

~~~
usaphp
I see now :) great work btw, I really like the simplicity of it.

------
zuxfer
This is simplicity at its best. Good one.

Also resizing is one thing you can look into. Grid kind of a thing. That makes
it a complete package.

------
bstamour
Does Rob Zombie know about this? :-)

~~~
leftnode
Or CBS with The Munsters?

------
dheera
The one thing I don't like (i.e. inconsistent with the UIs of most OSes) is
that if the user drags something to a valid target, and then before the mouse
is released, drags it off that valid target to an invalid target, and then
releases the mouse at that point, the valid target is triggered. What should
happen is that the entire drag-and-drop operation should be cancelled, as if
the user dragged straight to the invalid target and released.

~~~
bevacqua
This is hidden behind an option. `revertOnSpill: true`

------
rawnlq
Maybe include a comparison with popular libraries like jquery ui draggable?

------
jscholes
Does Dragula implement keyboard accessibility?

~~~
callum85
I wouldn't want a DnD library to magically 'implement' accessibility for me.
How would that even work in a one-sizzle-fits-all way? If I'm building a UI
that needs both mouse interaction and keyboard interaction, I want to consider
and build both those things, not expect all the keyboard stuff to happen
automatically because I used a library to manage mouse events.

EDIT there's a bad autocorrect in there but I'm going to leave it

~~~
jscholes
> I want to consider and build both those things, not expect all the keyboard
> stuff to happen automatically because I used a library to manage mouse
> events.

I understand what you're saying and commend you for it, but other developers
might not want to implement all that themselves, or more often than not, might
not even be aware that they have to. In other words, a JavaScript library with
zero accessibility features gets added to one hundred websites over night, and
in an instant, you have one hundred inaccessible websites. It is an all too
common pattern in recent years, as most projects, even the big ones, don't
even include accessible examples.

~~~
callum85
But this is a library. It's not a drop-in 'sortable list' component (which I
agree could, and should, have built-in keyboard accessibility). It's a general
purpose toolkit for setting up drag interactions.

Asking if it 'implements' keyboard accessibility is like asking if a box of
hardware tools implements wheelchair accessibility – it might be possible to
build something wheelchair-accessible using the toolbox, but that's up to you.

I completely agree that there are lots of devs who won't consider
accessibility when using this or other DnD libraries, and that's a shame, but
it's not the place of a DnD library to magically create an alternative
keyboard UI that somehow corresponds with whatever drag-and-drop UI you've
built using the library. That just couldn't work. A human needs to think about
it.

~~~
jscholes
You make some good points, and I agree that my original question, as it was
phrased, isn't the best fit for a library such as this. Perhaps, what I
should've asked is whether the demo, which developers will use as a jump-off
point, implements any keyboard accessibility (it doesn't, by the way, so I'm
not hopeful that any projects using this will be keyboard-accessible).

~~~
bevacqua
Author here. It's really easy to do. I implement tons of keyboard
accessibility alongside dragula in my projects. In the demo it just felt out
of scope. In one project I use dragula for a sprintboard, where you can cancel
drags with Esc, drop with Enter, and move cards manually across columns with
the arrow keys or a shortcut for each column (e.g 'o' for open)

So yeah, it's not part of the lib but it's deadbrain-easy to add on top.

------
_mikz
Why not HTML5 drag&drop ?

~~~
moretti
[http://www.quirksmode.org/blog/archives/2009/09/the_html5_dr...](http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html)

~~~
Sir_Cmpwn
This guy seems to fundamentally misunderstand a lot of things about drag and
drop.

~~~
dubcanada
He wrote that article 6 years ago, before a lot of the latest standards were
even semi finalized. So when he wrote it he was 100% correct. Now however that
article is a bit out of date.

------
hammerbrostime
Request: Make it so that it works well in scrolling areas too. This has been
the major deficiency in most drag and drop libraries that I've tried.

~~~
welanes
Sortable (linked to above) seems to get that mostly right.

------
shultays
Didn't work at first for me.

Google chrome 43.0.2357.134 m, windows 8.

I see the hind icon but trying to drag selects text/elements instead.

I refreshed page and it started working.

------
uberneo
Any AngularJS binding for it ?

------
hacker_9
How did this make the front page? Isn't this just jquery.draggable()

~~~
bevacqua
Except that dragula is 3.7kb min/gzipped, instead of (95kb + images in jquery
+ jquery-ui)

~~~
thaumaturgy
Thank you. I habitually avoid jQuery, it's almost always a lot heavier than I
need it to be, and depend on libraries like yours to quickly add valuable
functionality.

------
Timucin
What a terrible name. =)

------
jhildings
Looks quite similair to [http://gridster.net/](http://gridster.net/)

~~~
dasboth
This is what I'm using. Generally easy to use but there are a few CSS issues.
GitHub page has people's workarounds but it hasn't been 'officially' updated
for a while.

Edit: also, Gridster shuffles the panels around nicely in both axes and allows
resizing which is very useful

