Dragula: Drag and drop so simple it hurts

https://github.com/bevacqua/dragula#readme

by bevacqua • 10 years ago

307 102 10 years ago

github.com

joeyspn4• 10 years ago

What's the point of sending this again?

https://news.ycombinator.com/item?id=9914045

I thought this was considered spammy behaviour: https://hn.algolia.com/?query=dragula&sort=byPopularity&pref...

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

vblord• 10 years ago

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!

joeyspn4• 10 years ago

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

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

randlet• 10 years ago

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!

err4nt9• 10 years ago

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

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

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!

alessioalex• 10 years ago

This looks like a fun experiment. Have you considered adding this as a Chrome plugin and make it "remember" what you drag? Also maybe implement some sort of "undo" mechanism as well?

Thanks for sharing.

err4nt9• 10 years ago

Hi! Thanks for your interest.

Have I considered making it a chrome plugin?

No, but you can run it by pasting 'javascript:' in the URL bar, followed by the contents of http://staticresource.com/dragon.js or as a bookmarklet in Chrome, but the real intended browser I was hoping to use this on was Mobile Safari - to rearrange sites via touch on limited hardware. It also works flawlessly on a $50 Amazon Fire tablet too!

What I created it for was the ability to load up a site, rearrange it, screenshot it - and refresh to have it return to normal (either for more screenshots or to use it). One reason this won't do what you're thinking it will 'saving the location to where you have dragged it' is that it does unexpected things when you resize the browser. If your browser always remembered where you positioned things I think it would quickly end up broken :/

Can you implement an undo?

I was thinking about this last night. It is possible (you could remember the previous values for the top and left, then set those values when a keyboard key is pressed) but again the big target for this script for my use will be browsers without keyboard (for an undo shortcut) so I'd also need to add an on-screen undo button. I'm still thinking about this and how to accomplish it.

Feel free to use the source as well, consider it under MIT license :)

DonHopkins2• 10 years ago

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.

err4nt9• 10 years ago

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.

theoh• 10 years ago

Excellent story, but I assume few applications these days use Xt or Xaw widgets anymore.

It's striking how the pendulum has swung away from programmer-orientated environments like X11 or Emacs where writing your own policy/component/tool/script is encouraged and attributes of internal widgets etc. are accessible. May it swing back soon.

oliv__2• 10 years ago

This is really cool.

I could totally see a visual web editor that could work by dragging things around like this, with the css properties in a sidebar updating as you drag things around. And it could also work for "power users" by letting you edit the css directly, like you would in the browser Inspector.

I myself like to design in the browser to quickly see changes but sometimes Inspect element > Manually track and copy all changes to actual editor gets a little annoying.

Would love to use what I just described.

err4nt9• 10 years ago

My job is to design sites that work responsively, from widths randing from 200px - 2000px. There's no way one layout that could be achieved through drag-and-drop like this could adapt to fit desktop, tablet, and phone users, unless you have multiple, entirely different layouts built for different widths using the same elements, so then it 'jumps' between totally different layouts between phone, tablet, and desktop. That's not ideal since desktop users may resize their browser into 'tablet' mode and totally lose the experience. Jumping between alternate layouts is jarring.

The nature of responsive CSS is that the simplest way to build a responsive website isn't to use a tool - but just to write the CSS by hand. I don't even use SASS or Less to compile CSS for me. At the end of the day, if the result you want is lines of CSS in a file, the simplest way to arrive at that result is to write only the lines of CSS you need.

If you're wanting to design responsive websites I'd say the easiest tool to use would be a text editor!

nkrisc2• 10 years ago

This has a lot of potential to be very useful. One suggestion I'd make (or just implement myself) is suppress mouse events. When I'm dragging a link, for example, and I release the mouse it counts as a click on the link and I lose everything I moved.

The biggest use case I see for this is making super fast screenshots of variations of pages to illustrate an idea for an improvement to developers, other designers, or stakeholders.

err4nt9• 10 years ago

There is already `e.preventDefault()` happening on the events, so for example when you drag on a touchscreen it would normally scroll the page - but after invoking this it won't do that.

What I'm not sure how to do is block other things on the page specifically also set to happen on the same events.

On a desktop web browser playing around with this I've had success hammering on the Esc key while moving links though. If you press Esc right after releasing most links it won't leave the page :)

ant6n• 10 years ago

tldr: seems to be some browser thing.

netghost• 10 years ago

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

DonHopkins2• 10 years ago

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

http://www.art.net/~hopkins/Don/unix-haters/x-windows/disast...

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.

chias4• 10 years ago

What does any of this have to do with Dragula?

dang9• 10 years ago

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

cylinder7142• 10 years ago

coughcoughpiemenuscough

edem• 10 years ago

Build is failing now.

franciscop• 10 years ago

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

bevacqua4• 10 years ago

https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.3/dragula...

0x4a6f6579• 10 years ago

Previously (all by bevacqua):

https://news.ycombinator.com/item?id=9370838

https://news.ycombinator.com/item?id=9373406

https://news.ycombinator.com/item?id=10319438

https://news.ycombinator.com/item?id=10338587

https://news.ycombinator.com/item?id=10479440

https://news.ycombinator.com/item?id=10506895

https://news.ycombinator.com/item?id=10560160

epmatsw• 10 years ago

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

reikonomusha• 10 years ago

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

d13• 10 years ago

This is exactly what I was looking for this morning, and am extremely happy that it was posted on HN.

city41• 10 years ago

Another way to look at it is a sign that HN doesn't always bubble quality to the top. HN might not actually care, casualties may be expected as the algorithm's goal is not "all quality rises" but rather "no cruft rises"

Which is fine, but a side effect is people resubmit often hoping one submission will catch.

danneu• 10 years ago

Most people are irrationally timid about a little bit of self-promotion and err on the comfortable, meek side of doing nothing at all.

marknutter2• 10 years ago

I'm sincerely glad it was submitted that often, otherwise I might not have seen it today.

sdegutis• 10 years ago

Absolutely. To quote a fictional Charles Manson quoting 1990s UPN, "If I haven't seen it, it's new to me!" I'm probably going to replace our existing drag/drop solution at work with Dragula since it is much superior, but if this wasn't posted today I would not have even thought to even look for it.

dang9• 10 years ago

Yes. It clearly has value and I'm glad people got to see it too. Unfortunately, this is a tradeoff with no satisfying optimum.

chias4• 10 years ago

Glad to see it has garnered a little more discussion / visibility this time. I'm glad to have found it :)

kbenson• 10 years ago

I wonder how it go submitted so many times in the last 6 months (clicking the "past" link by the link to the article makes it obvious). Isn't the duplicate detection supposed to stop that?

simonebrunozzi• 10 years ago

Yes. And some of these other positive comments around here are very suspicious.

squeaky-clean2• 10 years ago

Isn't the duplicate detection supposed to stop that?

This may be entirely made up, but I remember hearing that the duplication detection doesn't apply if a submission doesn't get a certain amount of attention. Looks like the only submission to get more than 3 points was 297 days ago.

brudgers3• 10 years ago

To me, it looks like a project worth believing in, despite what might be considered to be a substantial lack of glamour. Perhaps, one way of looking at it is that the author knew it was right and useful and pushed the rules...incidentally, the sort of rules where nobody is going to get hurt.

To put it another way, I suspect that submitting the same thing about once a month or so, is line noise when it comes to spamming Hacker News. And if the content were bad it probably would have been flagged to death at least once. It hasn't been, because it's good but unnoticed.

It could be it went rather unnoticed because each submission wasn't tweeted to a bunch of friends for upvotes, it never was submitted to product hunt, and the author doesn't search engine optimize on Medium.

And anyway, as this comment by me illustrates, meta discussion is often dull. Hence, generally discouraged by Hacker News Guidelines.

brandon272• 10 years ago

Where's the harm? It's not a commercial product.

bigtones• 10 years ago

I for one am happy it got posted again - looks like a quality JS component I have not seen before.

dang9• 10 years ago

There were many more than that: https://hn.algolia.com/?query=Dragula&sort=byDate&dateRange=.... It's of course fine to submit your own work to HN—more than fine, it's encouraged—and a small number of reposts are ok if a story hasn't had significant attention in the last year or so (see https://news.ycombinator.com/newsfaq.html), though a dozen is excessive.

More importantly, though, this submission has received significant attention on HN within the last year: https://news.ycombinator.com/item?id=9914045. That makes this post unequivocally a dupe.

It's obviously a good project and there are many people in the thread learning about it for the first time and finding it interesting, which is great. But 300 points 7 months ago is so obviously within the dupe window that I think justice has to trump mercy in this case, though our bias runs the other way.

The underlying problem is that so much good stuff streams through HN that nobody can see more than a fraction of it.

dawkins• 10 years ago

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)

bevacqua4• 10 years ago

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.

monsieurbanana• 10 years ago

npm because it's now the de facto package manager for javascript.

And why a package manager? For many reasons, the most useful ones are :

- ease of install

- you can declare dependencies for your plugin instead of having the end user go to X differents pages to download everything needed

- the most important one : you don't have to check all your packages for important updates like security ones

dandigangi• 10 years ago

Upvoted primarily for the repo name.

chrisabrams• 10 years ago

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.

rcthompson• 10 years ago

With that name, the motto should be "Drag and drop that's not a pain in the neck".

overcast2• 10 years ago

Winner!

danso• 10 years ago

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

jgroszko• 10 years ago

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/

jhallenworld• 10 years ago

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

taytus• 10 years ago

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

glossyscr• 10 years ago

Nice logo

overcast2• 10 years ago

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

such_a_casual• 10 years ago

God I love that logo: https://github.com/bevacqua/dragula/raw/master/resources/log...

piratebroadcast• 10 years ago

Can this be used in a Rails project?

smaili• 10 years ago

Framework support includes vanilla JavaScript, Angular, and React.

Any reason why jQuery isn't on this list?

err4nt9• 10 years ago

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

venomsnake• 10 years ago

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

eximius• 10 years ago

Demo works on mobile well. Nice.

masswerk6• 10 years ago

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• 10 years ago

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.

masswerk6• 10 years ago

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

Flimm• 10 years ago

I would say the best practise for modern browsers is to place this in the <head>:

    <script async src="script.js"></script>

bevacqua4• 10 years ago

Embedding scripts in <head> is an established worst practice. It blocks rendering for no good reason. Sum that with the fact that dragula is a drag&drop library and as such you don't need it in the slightest to display your content, and it becomes obvious why I don't support <head> embedding.

masswerk6• 10 years ago

Wouldn't a "defer" attribute and waiting for document.DOMContentLoaded be the appropriate way to do this? This would also document the reasons for this and would allow for a decent organization of the document (what the head section is good for). – To me, this is rather late-1990s style, before there were such things as defer and sophisticated DOM events.

mccolin• 10 years ago

Script tags at the bottom of body has become the accepted standard for faster page loads. I'd think the library would have to be doing some strange things to not work if placed in the head, though.

bevacqua4• 10 years ago

I'd think the library would have to be doing some strange things to not work if placed in the head, though.

Not really. All it does is `var body = document.body` in an IIFE. In <head>, that yields undefined.

sotojuan• 10 years ago

That's interesting—I started learning JS last year and I was told to never put it in `<head>` but instead before the end of `<body>`.

masswerk6• 10 years ago

Very interesting. I suppose, in fact this would be rather slowing down the page in most cases, if applied as a common rule. That is, provided you were using self-contained inline-resources only. Using any kind of include/require mechanism would change the picture in favor of a touch-as-late-as-possible strategy.

geohuz• 10 years ago

It will be super cool with resizable functionality

chias4• 10 years ago

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.

chias4• 10 years ago

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

Dragula: Drag and drop so simple it hurts

Related Stories