Recently I came across a new java script library which is lightweight and very useful to create drag n drop interface for websites. It is a wonderful addition to your library and it is based on Vanilla java script. Anyone familiar with Vanilla JavaScript can get a joyride with this new Dragula. To know more about this and get your hands dirty with this new wonderful javascript library Visit the below mentioned link. https://github.com/bevacqua/dragula
I don't know if I'd call 10k minified and 58k normal "lightweight", but then I have a VERY different definition of that than most people, particularly when it comes to JavaScript. Though a LOT of the code bloat is simple stuff that could be cleaned up without minification, like the endless pointless "VAR" declarations that could be combined into one comma delimited list, weird needlessly complex class handling functions, multiple IF statements that have the same result... It could be far leaner and more useful if the codebase were just cleaned up a bit. Like just this mess: var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this} Code (markup): Is a pretty nasty mess to do the job of this: var g= typeof window !== "undefined" ? window : (typeof global !== "undefined" ? global : (typeof self !== "undefined" ? self : this)); Code (markup): Which is smaller even with whitespace, and WAY more efficient. Though really I'd question given what it looks like is being referenced like window, self or global if undefined vs. false vs. 0 vs. empty string would matter... in which case... var g = window || global || self || this; Would probably do the job... though I'd really wonder, is there EVER a situation where this library would be in use that the core DOM element "window" wouldn't exist?!? Seems damned unlikely. I've never seen anyone check for "window" before! The rest of that shouldn't even fire. Or just stuff like this: var cache = {}; var start = '(?:^|\\s)'; var end = '(?:\\s|$)'; Code (markup): That could simply be this: var cache = {}, start = '(?:^|\\s)', end = '(?:\\s|$)'; Code (markup): Minor things, but they add up quick. Laugh is it's done in some places not others, making it look a bit like no common style guide was used, or the devs just blindly did copypasta from one thing to another. Has some promise, not wild about the lack of a graceful degradation plan common to this type of scripting on websites (which is why I say don't do this on websites) whilst at the same time, I'm looking for something like this for my first major web application (a big long project that may amount to nothing depending on the answers I get to some questions from the folks at Electron / Atom) so it's interesting to see how others would go about it. Again applications live under different rules and requirements than websites which is why I'm even looking at this. Some of it seems very well coded -- a lot of it has me scratching my head going "what the devil is this even trying to accomplish?!?" -- that entire condensed, minified and possibly obfuscated 'first line' being filled with "what is this even trying to do, much less WHY?" At the same time very interesting since I'm working on much the same thing -- my needs being that I need to be able to say that it can "be child of this ID", or "child of any elements with THESE ID's (passing an array)", as well as "siblingTo" to say classes or tagnames it can go before or after... and I need a procedural call or other way to attach it to DOM elements created on the fly from the app.
This can be done in 30 lines of javascript (no hack, no compress). It makes use of file reading api. Go to html5rock for tutorial.
I don't think that's what this is -- this is dragging and re-arranging elements on the page, NOT dragging and dropping files from outside the browser to the browser. I'm pretty sure that has jack **** to do with the new FileReader Web API object.