jQuery UI

jQuery UI es una biblioteca de componentes para facilitar eventos interactivos.

Puede descargarse en:

http://jqueryui.com/

o utilizar:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Tiene las siguientes interacciones:

Añade comportamientos complejos a los elementos:

• Draggable: Hace al elemento arrastrable.
• Droppable: Permite que el elemento responda a elementos arrastrables.
• Resizable: Permite redimensionar el elemento.
• Selectable: Permite seleccionar entre una lista de elementos.
• Sortable: Ordena una lista de elementos.

Draggable

Permite acer arrastable a cualquier elemento:

$(function() {
$( "#nombre" ).draggable();
});

Movimientos limitados

En el eje X o Y

$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
});

En un contenedor o en el contenedor padre

$(function() {
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable5" ).draggable({ containment: "parent" });
});

elegir una zona de arrastre

$(function() {
$( "#draggable" ).draggable({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.clase" });
$( "div, p" ).disableSelection();
});

Volver a la posición de inicio

$(function() {
$( "#draggable" ).draggable({ revert: true });
});

Pegarse a otros elementos o a un grid

$(function() {
$( "#draggable" ).draggable({ snap: true }); // a otros elementos arrastables
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); //a una caja
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); //a los bordes exteriores de una caja
$( "#draggable4" ).draggable({ grid: [ 20,20 ] }); // a un grid de 20x20
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); // a un grid de 80x80
});

arrastable y cambio de orden

$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});

Cambiar el z-index

$(function() {
$( "#set div" ).draggable({ stack: "#set div" });
});

Draggable Touch

La lbrerían Draggable Touch es un complemento al plugin de jQuery UI para hacer que los objetos puedan arrastrarse en los dispositivos táctiles. 

https://github.com/heyman/jquery-draggable-touch

$("#nombre").draggableTouch();

la libreria Touch punch

http://touchpunch.furf.com/

Debe usarse los siguientes js:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

Despues del jQuery Ui debe ir

<script src="jquery.ui.touch-punch.min.js"></script>

<script>$('#widget').draggable();</script>