Alternatives for drag and drop of jquery-ui

Question

I am implementing a Drag and Drop system for web in javascript, and my problem is this, due to reasons like I do the project can not use jquery UI to implement this Drag and Drop, I wonder if there is any script drag and drop that allows me to do the same or at least close to jquery UI (or do you really think that jquery is my best option?).

I tried with interactjs, http://interactjs.io/, but I could not understand how to implement the revert explicitly as this only works when you drag outside the container object draggable but not really return to the position initial, and also not find anything regarding the use of clones.?

This is very important because all the scripts of drag and drop with whom I have encountered (which do not make use of jquery) suffer from the same problem,and i could not understand how to solve and this is, functions revert and clone, these two characteristics are fundamental to what I'm trying to do.

Answer 1

It really depends of what kind of element you want to drag & drop, but I would suggest to go for a plain HTML5 D&D implementation.
For basic D&D of DOM elements it's widely supported. For things such files/folders only modern browsers do support.
Here's a tutorial complete with all the various events to listen: http://www.html5rocks.com/en/tutorials/dnd/basics/

For revert:
* On dragstart save the current position of the element * On drop check if your element is in the defined boundaries, if not animate back to the previous position

It can be tricky the animation but it should simple at least to start with the check.

For the clone:
* Do you have to copy all the data/metadata for your element?
Sometimes you may want only few bits of the data you're dragging and, having a ready template for "dropped" stuff, you can fill such template with your data from the dropped element.
* On drop you have to read the element data, remove it from the original location and add the template to the target one.

The bottom line is: use your default JS engine as your D&D library.

Answer 2

May I suggest my own written script "Lean and Mean drag&drop" Reverting and cloning are easy to implement. When combined, the cloned item will revert to its first position. https://supraniti.github.io/Lean-Mean-Drag-and-Drop/

Answer 3

jQuery UI has one of the best drag and drop implementations that I know of. The problem with it though is the size of the library; this is probably due to the implementation detail for older browsers.

I had a similar problem to you, owing to jQuery UI's large size which I could not justify for the application. I replaced it instead with Sortable, which is dependency-free. It does not have all of jQuery UI's drag and drop support, but it is lightweight and I think good enough for most use cases.

Usage

<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

var el = document.getElementById('items');
new Sortable(el);

As for reverting the sort order; it's probably best to implement it in something like Backbone collections, so that you decouple the DOM state from the collection of models that you're trying to sort.