17 ms·
Dragula: Drag and drop so simple it hurts
- joeyspn 11y agoWhat'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&prefix&page=0&dateRange=all&type=story https://hn.algolia.com/?query=dragula&sort=byPopularity&pref... I'm not saying that the lib isn't great.
- vblord 11y agoOne 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 11y agoWe 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&prefix&page=0&dateRange=all&type=story https://hn.algolia.com/?query=dragula&sort=byPopularity&pref...
- jhall1468 11y agoOnly 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 11y agoThe 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 11y agoDon't you have better things to do than worry about this?
- dang 11y agoThat's not nice. The fact that users worry about HN being good is the most important thing keeping it good.
- dang 11y agoThe time window we apply is "about a year", and 300+ points is clearly significant, so by HN's longstanding policy there's no question that this is a dupe. https://news.ycombinator.com/newsfaq.html https://news.ycombinator.com/newsfaq.html
- brudgers 11y agoIt's probably better to discuss issues regarding the mechanics of Hacker News via email with dang because ordinary users can't change them and meta discussions are discouraged by the community.
- joeyspn 11y agoI've just emailed dang, hopefully someone from the HN team can clarify where is the red line...
- randlet 11y agoI 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!
- deleted 11y ago[deleted]
- err4nt 11y agoOn 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!
- alessioalex 11y agoThis 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.
- err4nt 11y agoHi! 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 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 :)
- ant6n 11y agotldr: seems to be some browser thing.
- netghost 11y agoAh neat. Bevacqua does some great work. If you're interested in JS, browse his github repos and check out ponyfoo.com
- DonHopkins 11y agoIs it as powerful as XView drag-n-drop under X-Windows? http://www.art.net/~hopkins/Don/unix-haters/x-windows/disaster.html 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.
- chias 11y agoWhat does any of this have to do with Dragula?
- dang 11y agoTalking about drag-and-drop in a thread about a drag-and-drop library is surely on topic.
- cylinder714 11y agocoughcoughpiemenuscough
- edem 11y agoBuild is failing now.
- franciscop 11y agoMmmh no CDN? I wanted to quickly try it on jQuery but couldn't
- bevacqua 11y agohttps://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.3/dragula.min.js https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.3/dragula...
- 0x4a6f6579 11y agoPreviously (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 11y agoWow, that's some pretty blatant self-promotion.
- reikonomusha 11y agoHN 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.)
- jnet 11y agoI think that is a very good thing, I want to know about these useful projects
- joeyspn 11y ago> 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
- dawkins 11y agoVery 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 11y agoBecause 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 11y agonpm 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 11y agoUpvoted primarily for the repo name.
- chrisabrams 11y agoI 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 11y agoWith that name, the motto should be "Drag and drop that's not a pain in the neck".
- overcast 11y agoWinner!
- danso 11y agoThat motto, plus its fantastic logo, would make it by far the best branding of any open-source plugin.
- jgroszko 11y agoI 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/
- jhallenworld 11y agoVery 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 11y agoHaven't tried it yet, but I just wanted to comment that the logo and the name are just perfect!
- glossyscr 11y agoNice logo
- overcast 11y agoPretty rad, however the issue I see using this on mobile, is that the act of scrolling the page, moves elements around.
- such_a_casual 11y agoGod I love that logo: https://github.com/bevacqua/dragula/raw/master/resources/logo.png https://github.com/bevacqua/dragula/raw/master/resources/log...
- piratebroadcast 11y agoCan this be used in a Rails project?
- smaili 11y ago> Framework support includes vanilla JavaScript, Angular, and React. Any reason why jQuery isn't on this list?
- err4nt 11y agoIf 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 11y agoCan you dig trough the ditches and burn trough the witches with it?
- eximius 11y agoDemo works on mobile well. Nice.
- masswerk 11y agoFrom 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 11y agoIf 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 11y agoThere'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 11y ago> 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.
- geohuz 11y agoIt will be super cool with resizable functionality
- chias 11y agoI'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 11y agoActually 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 :)