7 ms·
Dragula: Simple drag and drop
- zuxfer 11y agoThis 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.
- Leftium 11y agoCool. 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/
- deleted 11y ago[deleted]
- LoSboccacc 11y agoI'd suggest interactjs.io been using it and works like a champ
- SeanAnderson 11y agoErm... 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 11y agoScreencast 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 11y agoDo you have an alternative website which provides free video hosting? I just use this because Jing is a free/simple screen capturing utility.
- deleted 11y ago[deleted]
- mgkimsal 11y agovimeo? youtube?
- kactus 11y agoYou could record it as mp4/webm and host it on a fileshare. I use ShareX for my screenshotting/quick screen recording needs.
- Sir_Cmpwn 11y agohttps://imgrush.com/ https://imgrush.com/ Based on the open source MediaCrush, may it rest in peace
- andrepd 11y agoTry http://www.streamable.com http://www.streamable.com
- rawnlq 11y agoMaybe include a comparison with popular libraries like jquery ui draggable?
- babby 11y agoHow does this compare to Sortable? https://github.com/RubaXa/Sortable https://github.com/RubaXa/Sortable
- lancefisher 11y agoSortable's animations were janky for me on an iPad Air. Dragula was nice and smooth.
- onli 11y agoHere 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.
- tripzilch 11y agoOdd. Here on Firefox/Linux using an underpowered laptop and 1080p monitor (indeed not the most optimal set up, but it's what I got right now), I expect most animations on modern websites to be janky. But Sortable is completely smooth for me, yet Dragula lags or stutters a little. I really wonder what the difference is? I do have to say, even though they were slower, Dragula's drag-n-drop felt more "solid", in a way. Though I would guess that's some subtle clever placement tweaks, nothing that should affect performance.
- mzjs 11y agoThe sortable animations are incredibly bad on ipad 2 (ios 7) as well.
- ehnto 11y agoI recently had to implement a drag and drop list, and found Sortable was a super easy to use and extensible library, with configurable callbacks for inserting your own logic in all the right places. It's also a stand alone library, which is nice. I tried a bunch of others, but Sortable was the clear winner by a fair margin.
- _mikz 11y agoWhy not HTML5 drag&drop ?
- moretti 11y agohttp://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html http://www.quirksmode.org/blog/archives/2009/09/the_html5_dr...
- stevendwood 11y agoI wouldn't totally write off HTML5 drag and drop, if you want to interact with other apps and enable drag between window it's the only game in town https://github.com/stevendwood/html5-dropzone https://github.com/stevendwood/html5-dropzone
- Sir_Cmpwn 11y agoThis guy seems to fundamentally misunderstand a lot of things about drag and drop.
- dubcanada 11y agoHe 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.
- deleted 11y ago[deleted]
- jhildings 11y agoLooks quite similair to http://gridster.net/ http://gridster.net/
- dasboth 11y agoThis 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
- krat0sprakhar 11y agoIf 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
- usaphp 11y agoIt 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
- Timucin 11y agoWhat a terrible name. =)
- jscholes 11y agoDoes Dragula implement keyboard accessibility?
- bigtunacan 11y agoUpvoted. What about other JavaScript DnD libs; which one's do implement keyboard accessibility?
- callum85 11y agoI 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 11y ago> 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 11y agoBut 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.
- uberneo 11y agoAny AngularJS binding for it ?
- bstamour 11y agoDoes Rob Zombie know about this? :-)
- leftnode 11y agoOr CBS with The Munsters?
- lux 11y agoThis 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.
- deleted 11y ago[deleted]
- hammerbrostime 11y agoRequest: 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 11y agoSortable (linked to above) seems to get that mostly right.
- hacker_9 11y agoHow did this make the front page? Isn't this just jquery.draggable()
- bevacqua 11y agoExcept that dragula is 3.7kb min/gzipped, instead of (95kb + images in jquery + jquery-ui)
- thaumaturgy 11y agoThank 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.
- mikegioia 11y agoWhere do you see this using jQuery.draggable? Or do you just mean it's a duplicate of draggable? Either way, dragula is drag and drop without a jQuery dependency, and in ~500 lines of code. This is a fantastic option for anyone who doesn't want to include jQuery or jQuery UI in their app.
- dheera 11y agoThe 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 11y agoThis is hidden behind an option. `revertOnSpill: true`
- shultays 11y agoDidn'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.