
Dragula: Drag and drop so simple it hurts - bevacqua
https://github.com/bevacqua/dragula#readme
======
rcthompson
With that name, the motto should be "Drag and drop that's not a pain in the
neck".

~~~
danso
That motto, plus its fantastic logo, would make it by far the best branding of
any open-source plugin.

~~~
jgroszko
I was always a fan of HammerJS's branding, but it looks like they removed the
silhouette of MC Hammer from their front page :(
[http://hammerjs.github.io/](http://hammerjs.github.io/)

------
err4nt
On a slightly different note - have you ever wanted to click/tap to rearrange
elements on -any- website?

Just yesterday I wrote a little bit of JavaScript that will let you reposition
any element by dragging it:
[http://codepen.io/tomhodgins/pen/LGJKdE](http://codepen.io/tomhodgins/pen/LGJKdE)

And of course, I also minified it so it can be used from the address bar or as
a bookmarklet. The minified version is at
[http://staticresource.com/dragon.js](http://staticresource.com/dragon.js)

Ive been having fun loading up sites I know, invoking the JS and then trying
to rearrage the elements into better designs! For example, how would HN look
if the reply buttons were aligned to the right edge of the textarea they are
under, that would be an improvement :) We can try it out!

~~~
DonHopkins
Please add a trash can in the corner so you can throw out any element you
don't like!

Once I ran an X window manager on XCalc's client window. Each button got its
own window frame, and you could move them around and iconify the ones you
didn't need. Unfortunately the icons were bigger than the buttons.

~~~
err4nt
Did you know in the developer tools (if you right click on an element and hit
'Inspect') if you have an element selected in the live DOM tree view you can
hit delete or backspace (can't remember) and actually just delete that node
from the rendered page!

If you want to cosmetically hide it without deleting it, you can click in the
sidebar where there are all of the CSS styles there that apply to the element
you have selected you can add (double click at the top of the sidebar and
start a new rule)

    
    
        display: none
    

And the element will visually be hidden, while that content is still on the
page in a hidden way.

What you would find, if I tried to add an 'X' button to every element on the
page, is that often things are in multiple containers - and the most broken
sites are usually the ones with the biggest HTML. It would be nearly
impossible for you to 'X' out of elements visually top-down, the only way I
can see you being able to get in and actually select which element to delete
is using the tree-view in inspect element where you can navigate through the
elements in the stack as though you're looking from the side and can touch
just the layer you want.

------
0x4a6f6579
Previously (all by bevacqua):

[https://news.ycombinator.com/item?id=9370838](https://news.ycombinator.com/item?id=9370838)

[https://news.ycombinator.com/item?id=9373406](https://news.ycombinator.com/item?id=9373406)

[https://news.ycombinator.com/item?id=10319438](https://news.ycombinator.com/item?id=10319438)

[https://news.ycombinator.com/item?id=10338587](https://news.ycombinator.com/item?id=10338587)

[https://news.ycombinator.com/item?id=10479440](https://news.ycombinator.com/item?id=10479440)

[https://news.ycombinator.com/item?id=10506895](https://news.ycombinator.com/item?id=10506895)

[https://news.ycombinator.com/item?id=10560160](https://news.ycombinator.com/item?id=10560160)

~~~
epmatsw
Wow, that's some pretty blatant self-promotion.

~~~
reikonomusha
HN has traditionally been full of self-promotion, in both submitted links and
especially in comments (e.g., lots of "disclosure, I made X" or "shameless
plug, I made X" or ...). It's not necessarily a bad thing since the community
ultimately has control over what gets seen on top. And additionally sometimes
you are your only advertiser.

(In this very comments page, people are talking about their own code they
wrote with links to it, etc.)

~~~
joeyspn
> HN has traditionally been full of self-promotion...

Yes, but there are rules, and we all should play by the same rules. HNs rules
state that if your story got significant attention recently (this story was
1st six months ago) it'll be killed as dupe. But the user has been sending it
w/o stop even after that...

 _> Are reposts ok?

If a story has had significant attention in the last year or so, we kill
reposts as duplicates. If not, a small number of reposts is ok._

[https://news.ycombinator.com/newsfaq.html](https://news.ycombinator.com/newsfaq.html)

~~~
tobltobs
"significant attention" is of course hard to define, but a max. of 3 scores
does not count as significant attention in any book I know.

~~~
dang
But 300 does:
[https://news.ycombinator.com/item?id=9914045](https://news.ycombinator.com/item?id=9914045).

~~~
tobltobs
> got significant attention recently ...

I did not include the one submission with >300 because 200 days is not
"recently" imho.

~~~
dang
I see. But for HN the dispositive time window is a year, as described at
[https://news.ycombinator.com/newsfaq.html](https://news.ycombinator.com/newsfaq.html).
I don't know when pg came up with that but it was long before I started
working on HN.

------
randlet
I know it's not 'cool' but the fact that this supports IE7+ makes it
infinitely more useful to me personally.

Looks very very nice after a short play with the demo!

------
masswerk
From the documentation: "You shouldn't include it in the <head> of your web
applications. It's bad practice to place scripts in the <head>, and as such
dragula makes no effort to support this use case."

Serious question: With nearly 20 years in JS development, the concept of
placing scripts not in the head section as being desirable is new to me. (Just
saying, it used to be the other way round. Common resources, like scripts
were, aside from the title, the main reason, the head tag was introduced at
all.) -- Is there a source to this notion of script embedding, or can anyone
clarify? (What would be the winning propositions of not using parallel loading
slots?)

~~~
choward
If you have javascript in the head loading synchronously the page can't even
begin to render until the javascript has loaded. Placing script tags at the
bottom of the body allows the page to begin rendering while scripts are
loading.

~~~
masswerk
There's this facility called slots, at least this is, how it used to be. A
resource to be loaded is assigned a slot as available (generally 8 or so) and
the browser advances over resource tags. If a resource in the head section is
going to be interpreted and is ready, the resource is processed, the slot is
freed and available for further jobs. (This is partly, why only hard coded
resources are of relevance for the document.DOMContentLoaded event.) There's
no connection between single threaded execution and parallel slots.

(Edit: So this may be true for scripts that are requiring further resources,
but there's no need for this with scripts that are completely self-contained,
like dragula claims to be. Here, this might rather slow down the completion of
the page.)

~~~
lhorie
> There's no connection between single threaded execution and parallel slots

It has more to do w/ the DOM rendering. The rendering engine is required to
wait for a javascript resource to download because it can't know in advance
that the js file won't call `document.write`

`document.write` has a nasty property that it calls `document.open()` if the
document is not open for writing (which clears the document). Before the
DOMContentReady event, the document is open for writing (this is why, among
other things, console.log(document.body) yields null and
`document.write("<title>foo</title>") sets document.title` when called from
<head>)

If parsing of the document was allowed to skip a js file until it downloaded,
and if the script has a `document.write` call, then running the script upon
download completion (which would typically happen much later than
DOMContentReady fired) would trigger the implicit document.open() call, thus
yielding different (and catastrophic) semantics.

~~~
masswerk
What you're describing is the now ancient document stream model (document.open
– document.write – document.close; calling document.open() after
document.close implies document.open() and a loss of the content by an implied
call to document.clear()). But I honestly hope, document.write() isn't used
today (quite like "eval"), and everyone uses document.createElement(), etc.

As for the rendering engine having to wait for the resource as it hits it,
this is exactly why you want it to be ready then, as opposed to just starting
to download it and wait. (Even, if it is the very last tag, it will defer
completion. And if every library were claiming to be the last one ...)

> If parsing of the document was allowed to skip a js file until it downloaded
> (…) – This is, what the "defer" and the "async" attributes are for. (And,
> again, you don't want to call document.open(), be it explicitly or implied,
> because you would lose any content there is, since it implies
> "document.clear()". This is Netscape Navigator 2.0 stuff, 1996, really.)

P.S.: What you're heading for, were mere work-arounds in times, when the
document-object would have been created only as the parser hit the <body>–tag
(up to and including Netscape 3) and when enumerated properties became
available only after the body was opened (Netscape 4, etc). But even then, you
would apologize in a comment, if such means were required. (E.g., while
addressing Netscape 4's document.layers object in 1997.) Now, that there are
so many means to do this appropriately, I see no reason at all of banning
common resources from the head section and spreading them over the
document.body.

~~~
lhorie
If browsers decided to remove document.write and friends, then they would
obtain a guarantee that running a script after the recursive DOM assembly
routine yields the same result as running the script synchronously within it
(regardless of what the script might potentially do), and they would be able
to optimize the pipeline to allow you to put scripts in head without
triggering a performance problem.

As far as usage in the wild goes, I've seen document-stream-related functions
in rich text editors and comet (old school "websocket polyfills") codebases,
but that was many years ago. I can't say for certain why browsers still
support those functions.

------
dawkins
Very nice. Just lightweight js and it seems to work great.

I was going to download it and found:

 _If you 're not using either package manager, you can use dragula by
downloading the files in the dist folder. We strongly suggest using npm,
though._

Why would they _strongly suggest_ installing npm? (obviously I don't use node)

~~~
bevacqua
Because of updates and convenience. You could always use bower or the CDN
alternatively. But since npm is the way I use most of the stuff I develop,
that's what I recommend. You don't have to use node to use npm, but as a
package manager it resolves lots of issues even for front-end components.

------
DonHopkins
Is it as powerful as XView drag-n-drop under X-Windows?

[http://www.art.net/~hopkins/Don/unix-
haters/x-windows/disast...](http://www.art.net/~hopkins/Don/unix-
haters/x-windows/disaster.html)

The "drag-and-drop" metaphor tires to cover up the Unix file system, but so
little of Unix is designed for the desktop metaphor that it's just one kludge
on top of another with little holes and sharp edges popping up everywhere.
Maybe the "sag-and-drop" metaphor is more appropriate for such ineffective and
unreliable performance.

A shining example is Sun's Open Windows File Manager, which goes out of its
way to display ore dump files as cute little red bomb icons. When you double-
click on the bomb, it runs a text editor on the core dump. Harmless, but not
very useful. But if you intuitively drag and drop the bomb on the DBX Debugger
Tool, it does exactly what you'd expect if you were a terrorist: it ties the
entire system up, as the core dump (including a huge unmapped gap of zeros) is
pumped through the server and into the debugger text window, which inflates to
the maximum capacity of swap space, then violently explodes, dumping an even
bigger core file in place of your original one, filling up the entire file
system, overwhelming the file server, and taking out the File Manager with
shrapnel. (This bug has since been fixed.)

But that's not all: the File Manager puts even more power at your fingertips
if you run it as root! When you drag and drop a directory onto itself, it
beeps and prints "rename: invalid argument" at the bottom of the window, then
instantly deletes the entire directory trwe without bothering to update the
graphical directory browser.

~~~
chias
What does any of this have to do with Dragula?

~~~
dang
Talking about drag-and-drop in a thread about a drag-and-drop library is
surely on topic.

------
such_a_casual
God I love that logo:
[https://github.com/bevacqua/dragula/raw/master/resources/log...](https://github.com/bevacqua/dragula/raw/master/resources/logo.png)

------
netghost
Ah neat. Bevacqua does some great work. If you're interested in JS, browse his
github repos and check out ponyfoo.com

------
jhallenworld
Very nice. I once made a shipping planner in X that worked with drag and drop:
It was basically a packing game with orders and trucks. You drag the day's
orders around to arrange them on the trucks as you like (also you can drag the
trucks around, and each truck was a list of orders with a scroll bar). Each
truck shows its current capacity and turns red if the capacity is exceeded.
Each order shows its delivery address and size (plus you can click on it to
view the whole thing). When you are done, you click a button to print the pull
tickets, bills of lading and delivery tickets all in the right order. The
shipping guys loved it.

(Yes, you could try to use an optimization algorithm to do this- at the time I
had no access to the map information needed for it. Actually it would have
been difficult to beat the shipper's knowledge anyway.)

Were I to make this app again, I would want drag and drop in a web
application. I'm not sure if Dragula allows dragging between frames (and
dragging frames themselves).

------
chias
I'm enjoying playing with this. The only bit so far that I don't like is that
to trigger a switch, the mouse needs to cross the halfway point of the element
you want to swap positions with: in my application, it would be much more
intuitive for an element being dragged to "claim" a drop-target as soon as the
mouse moves over the target. I haven't yet found a way to accomplish this with
Dragula.

~~~
chias
Actually I've gone ahead and worked on it myself, in order to make it
compatible with a grid layout (which was the more general problem I was trying
to solve).

I still need to clean up my modifications, but I should have a pull-request
out within the next day or two, adding 'grid' to the existing 'horizontal' and
'vertical' direction options :)

------
smaili
> Framework support includes vanilla JavaScript, Angular, and React.

Any reason why jQuery isn't on this list?

~~~
err4nt
If there's a vanilla JS version already why would you need it to use jQuery?
Wouldn't that be introducing a new 'single point of failure' into this code on
your page? If there's any problem with jQuery or jQuery on your page then this
code would then also be vulnerable. As-is it's good to go :)

------
taytus
Haven't tried it yet, but I just wanted to comment that the logo and the name
are just perfect!

------
chrisabrams
I tried this project recently. I don't have good reviews. Unbinding the drag /
drop and re-binding was such a pain I gave up and went to SortableJS, which is
very simple to use.

------
joeyspn
What's the point of sending this again?

[https://news.ycombinator.com/item?id=9914045](https://news.ycombinator.com/item?id=9914045)

I thought this was considered spammy behaviour:
[https://hn.algolia.com/?query=dragula&sort=byPopularity&pref...](https://hn.algolia.com/?query=dragula&sort=byPopularity&prefix&page=0&dateRange=all&type=story)

I'm not saying that the lib isn't great.

~~~
vblord
One point of sending this again is that I didn't see it 200 days ago. This is
awesome and I'm glad it was submitted again. I'm gonna use this in the future!

~~~
joeyspn
We all miss many stories, but HN's rules are quite clear about reposts:

 _> Are reposts ok?

If a story has had significant attention in the last year or so, we kill
reposts as duplicates. If not, a small number of reposts is ok._

[https://news.ycombinator.com/newsfaq.html](https://news.ycombinator.com/newsfaq.html)

I've seen this story at least 3 times in the last months both on new & 1st
place in the front page sections:

[https://hn.algolia.com/?query=dragula&sort=byPopularity&pref...](https://hn.algolia.com/?query=dragula&sort=byPopularity&prefix&page=0&dateRange=all&type=story)

~~~
jhall1468
Only one of posts got any attention and it was 7 months ago. I hardly call
that "significant attention". Which, by the way, is completely subjective and
thus the opposite of "quite clear".

~~~
krisdol
The same user has been posting this multiple times a month, almost every
month. Now that this entry got attention, I hope he stops, although his first
post got very signification attention and it hasn't even been a year.

~~~
marknutter
Don't you have better things to do than worry about this?

~~~
dang
That's not nice. The fact that users worry about HN being good is the most
important thing keeping it good.

------
overcast
Pretty rad, however the issue I see using this on mobile, is that the act of
scrolling the page, moves elements around.

------
dandigangi
Upvoted primarily for the repo name.

------
franciscop
Mmmh no CDN? I wanted to quickly try it on jQuery but couldn't

~~~
bevacqua
[https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.3/dragula...](https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.3/dragula.min.js)

------
geohuz
It will be super cool with resizable functionality

------
piratebroadcast
Can this be used in a Rails project?

------
eximius
Demo works on mobile well. Nice.

------
glossyscr
Nice logo

------
venomsnake
Can you dig trough the ditches and burn trough the witches with it?

------
edem
Build is failing now.

------
ant6n
tldr: seems to be some browser thing.

