TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Dragula: Drag and drop so simple it hurts

307 pointsby bevacquaover 9 years ago

25 comments

rcthompsonover 9 years ago
With that name, the motto should be "Drag and drop that's not a pain in the neck".
评论 #11043297 未加载
评论 #11042610 未加载
err4ntover 9 years ago
On a slightly different note - have you ever wanted to click&#x2F;tap to rearrange elements on -any- website?<p>Just yesterday I wrote a little bit of JavaScript that will let you reposition any element by dragging it: <a href="http:&#x2F;&#x2F;codepen.io&#x2F;tomhodgins&#x2F;pen&#x2F;LGJKdE" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;tomhodgins&#x2F;pen&#x2F;LGJKdE</a><p>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 <a href="http:&#x2F;&#x2F;staticresource.com&#x2F;dragon.js" rel="nofollow">http:&#x2F;&#x2F;staticresource.com&#x2F;dragon.js</a><p>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!
评论 #11041886 未加载
评论 #11041953 未加载
评论 #11042033 未加载
评论 #11043605 未加载
0x4a6f6579over 9 years ago
Previously (all by bevacqua):<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9370838" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9370838</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9373406" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9373406</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10319438" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10319438</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10338587" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10338587</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10479440" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10479440</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10506895" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10506895</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10560160" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10560160</a>
评论 #11043772 未加载
评论 #11042694 未加载
评论 #11042097 未加载
评论 #11042098 未加载
评论 #11042869 未加载
评论 #11042138 未加载
评论 #11042718 未加载
评论 #11042088 未加载
randletover 9 years ago
I know it&#x27;s not &#x27;cool&#x27; but the fact that this supports IE7+ makes it infinitely more useful to me personally.<p>Looks very very nice after a short play with the demo!
masswerkover 9 years ago
From the documentation: &quot;You shouldn&#x27;t include it in the &lt;head&gt; of your web applications. It&#x27;s bad practice to place scripts in the &lt;head&gt;, and as such dragula makes no effort to support this use case.&quot;<p>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?)
评论 #11043512 未加载
评论 #11043537 未加载
评论 #11043525 未加载
评论 #11043764 未加载
dawkinsover 9 years ago
Very nice. Just lightweight js and it seems to work great.<p>I was going to download it and found:<p><i>If you&#x27;re not using either package manager, you can use dragula by downloading the files in the dist folder. We strongly suggest using npm, though.</i><p>Why would they <i>strongly suggest</i> installing npm? (obviously I don&#x27;t use node)
评论 #11042192 未加载
评论 #11042235 未加载
DonHopkinsover 9 years ago
Is it as powerful as XView drag-n-drop under X-Windows?<p><a href="http:&#x2F;&#x2F;www.art.net&#x2F;~hopkins&#x2F;Don&#x2F;unix-haters&#x2F;x-windows&#x2F;disaster.html" rel="nofollow">http:&#x2F;&#x2F;www.art.net&#x2F;~hopkins&#x2F;Don&#x2F;unix-haters&#x2F;x-windows&#x2F;disast...</a><p>The &quot;drag-and-drop&quot; metaphor tires to cover up the Unix file system, but so little of Unix is designed for the desktop metaphor that it&#x27;s just one kludge on top of another with little holes and sharp edges popping up everywhere. Maybe the &quot;sag-and-drop&quot; metaphor is more appropriate for such ineffective and unreliable performance.<p>A shining example is Sun&#x27;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&#x27;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.)<p>But that&#x27;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 &quot;rename: invalid argument&quot; at the bottom of the window, then instantly deletes the entire directory trwe without bothering to update the graphical directory browser.
评论 #11042086 未加载
评论 #11043659 未加载
such_a_casualover 9 years ago
God I love that logo: <a href="https:&#x2F;&#x2F;github.com&#x2F;bevacqua&#x2F;dragula&#x2F;raw&#x2F;master&#x2F;resources&#x2F;logo.png" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;bevacqua&#x2F;dragula&#x2F;raw&#x2F;master&#x2F;resources&#x2F;log...</a>
netghostover 9 years ago
Ah neat. Bevacqua does some great work. If you&#x27;re interested in JS, browse his github repos and check out ponyfoo.com
jhallenworldover 9 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&#x27;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.<p>(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&#x27;s knowledge anyway.)<p>Were I to make this app again, I would want drag and drop in a web application. I&#x27;m not sure if Dragula allows dragging between frames (and dragging frames themselves).
chiasover 9 years ago
I&#x27;m enjoying playing with this. The only bit so far that I don&#x27;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 &quot;claim&quot; a drop-target as soon as the mouse moves over the target. I haven&#x27;t yet found a way to accomplish this with Dragula.
评论 #11046945 未加载
smailiover 9 years ago
&gt; Framework support includes vanilla JavaScript, Angular, and React.<p>Any reason why jQuery isn&#x27;t on this list?
评论 #11043133 未加载
taytusover 9 years ago
Haven&#x27;t tried it yet, but I just wanted to comment that the logo and the name are just perfect!
chrisabramsover 9 years ago
I tried this project recently. I don&#x27;t have good reviews. Unbinding the drag &#x2F; drop and re-binding was such a pain I gave up and went to SortableJS, which is very simple to use.
joeyspnover 9 years ago
What&#x27;s the point of sending this again?<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9914045" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9914045</a><p>I thought this was considered spammy behaviour: <a href="https:&#x2F;&#x2F;hn.algolia.com&#x2F;?query=dragula&amp;sort=byPopularity&amp;prefix&amp;page=0&amp;dateRange=all&amp;type=story" rel="nofollow">https:&#x2F;&#x2F;hn.algolia.com&#x2F;?query=dragula&amp;sort=byPopularity&amp;pref...</a><p>I&#x27;m not saying that the lib isn&#x27;t great.
评论 #11041758 未加载
overcastover 9 years ago
Pretty rad, however the issue I see using this on mobile, is that the act of scrolling the page, moves elements around.
dandigangiover 9 years ago
Upvoted primarily for the repo name.
franciscopover 9 years ago
Mmmh no CDN? I wanted to quickly try it on jQuery but couldn&#x27;t
评论 #11041988 未加载
geohuzover 9 years ago
It will be super cool with resizable functionality
piratebroadcastover 9 years ago
Can this be used in a Rails project?
eximiusover 9 years ago
Demo works on mobile well. Nice.
glossyscrover 9 years ago
Nice logo
venomsnakeover 9 years ago
Can you dig trough the ditches and burn trough the witches with it?
edemover 9 years ago
Build is failing now.
ant6nover 9 years ago
tldr: seems to be some browser thing.