touch-dnd para agregar elementos con drag and drop

Descarga : touch-dnd

touch-dnd para agregar elementos con drag and drop, si quieres implementar una funcionalidad en el que intervengan elementos para ordenar como por ejemplo en una aplicación donde se maneje jerarquías, también puedes usar Draggable para usarlo por ejemplo en un carro de compras donde cada elemento gris es un producto y el elemento verde es el carrito.

Este plugin puede ser usado para infinidad de aplicaciones, donde el control de los elementos tiene que ser mas rápido , interactivo, y entendible.

 

 


Una de las principales ventajas de este plugin es que es muy sencillo de implementar ya que los accesos se realizan mediante la referencia que se tiene con la clase, esto se puede hacer con cualquier elemento html, lo que significa que los estilos pueden ser controlados sin perder apariencia (diseño inicial), claro pensando en que nuestro cliente es un poco meticuloso como para poner mucha atención a los detalles del diseño.
Un claro ejemplo te lo puedes encontrar en: http://ma.rkusa.st/touch-dnd/

Además tiene más de una demostración:

1.-  Sortable: http://ma.rkusa.st/touch-dnd/sortable.html

2.- Draggable: http://ma.rkusa.st/touch-dnd/draggable.html

3.- Droppable: http://ma.rkusa.st/touch-dnd/droppable.html

Un pequeño código descriptivo:

$(function() {
$('#lhs').sortable({ connectWith: '.droppable' })
$('#rhs').sortable({ connectWith: '#lhs' })
.on('sortable:receive', function(e, ui) {
ui.item.removeClass('draggable')
})
$('.draggable').draggable({ connectWith: '#rhs' })
$('.droppable').droppable({ activeClass: 'active', hoverClass: 'drop-here' })
})

 

 

 

Contenido relacionado:

  • Antonio Sanchez

    tengo curiosidad con esto, ya que con esto el usuario puede modificar el diseño de la interfaces a su gusto propio o acomodar las herramientas como el quiera, y hacer que este diseño que el usuario escogió se mantenga y se guarde, es lo que me gustaría intentarlo

  • Develoteca

    Bueno pues realmente hay plugins dedicados con la parte de de implementación, pero en general lo que tienes que hacer es guardar la información en la base de datos (si necesitas recordar todo el tiempo el orden) y cookies(sí solo es de manera temporal) , muchos de estos plugins envían arrays en forma ordenada con valores nuevos de ordenación.

    Puedes usar: http://develoteca.com/gridster-es-un-excelente-plugin/ ó http://jqueryui.com/sortable/#display-grid ó http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html e implementar el que más te agrade.