Can work with any type of layout

Super easy to integrate with your own app

Lean & Mean Drag and Drop is a small script for dragging, dropping, sorting and reordering html structures

The basic script is essentially the same for all cases. Set LMDD on an element (containing all that has to be dragged or nested in), and declare the relevant classes (containerClass,draggableItemClass & handleClass). The rest is done through proper HTML markup.

To animate transitions LMDD makes a copy of all movable elements on its scope and manage their location with relative positioning, this is an expensive process and might (in some cases) alter the way your markup renders while dragging. To prevent this from happening, AND save CPU on drag operations, add the class 'lmdd-block' to the parts of your markup which are not needed to be animated. This will stop LMDD from traversing down the DOM tree and keep all children of the element intact.

The detail object carries the following information:

To clone dragged elements, just add two additional classes to your markup: 'lmdd-clonner' - for every element you want to clone when dragged 'lmdd-dispatcher' - for the container (parent of the elements to be cloned) containers having the 'lmdd-dispatcher' class will not act as drop zones, the cloning operation will begin when the mouse cursor enters a different container.

LMDD is fairly easy to integrate with any other script. I would recommend treating the drag operation as any other user input, think of it as some kind of a sophisticated mouse gesture. Having this point of view in mind, the integration process should be as follows:

More

Bug reports & feature requests are more than welcome.

Feel free to ask questions and contribute on github

If you are interested in a drag&drop functionality for your web apps, you might also like: