Draggable, Dropable & Sortable en JQuery – 01

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0

Una funcionalidad muy interesante es poder hacer el drag&drop en las páginas. Para ello jquery nos proporciona 3 tipos de funcionalidades:

  • Draggable, será la característica que añadiremos a los elementos para que estos puedan ser arrastrados. Para ello simplemente haremos lo siguiente:

jQuery( elemento ).draggable({/*opciones*/} );

  • Dropable,  será la característica que añadiremos a los elementos para que estos puedan recibir un elemento dragable y efectúen una acción al recibirlo. Para ello haremos lo siguiente:

jQuery( elemento).droppable({({/*opciones*/} );

  • Aparte de los draggable y dropable existe un tercer element que puede ser convinable con los anteriores y tambien se fundamenta en el mismo principio, arrastrar y soltar. Este elemento es el Sortable, y lo que permite hacer es poder ordenar elementos de su interior, ya sean capas, lis, párrafos,.. y tener en cuenta el orden. Para generar un sortable lo que tenemos que hacer es:

jQuery(elemento).sortable({/*opciones*/});

Bueno ahora que ya hemos distinguido los diferentes tipos de elementos y como se generarían veremos como funcionarian, las opciones que tienen y como se conectan unos con otros.

DRAGABLE

Las opciones completas del draggable se pueden ver aquí (http://docs.jquery.com/UI/Draggable) pero especificaremos algunas que he encontrado interesantes:

  • containment, limita la zona por donde podras arrastrar el elemento.
  • connectToSortable, muy interesante, permite hacer que cuando arrastres el elemento por encima de un sortable, el elemento draggable se convierta en un elemento interior del sortable y puedas ordenarlo directamente en la lista.
  • opacity, hace que cambie la opacidad del elemento mientras lo arrastras, se especifica como un numero entre 0 y 1 (ex 0.46).
  • helper, necesario que tenga valor clone cuando lo queremos unir a un sortable. Crea una copia del elemento que estamos arrastrando dentro del sortable.
  • revert, hace que el elemento vuelva a su posición original cuando lo sueltas ( true o false).

Ejemplo:

jQuery( “.draggable” ).draggable({

containment: ‘#form-content’,

cursor: ‘move’,

connectToSortable: ‘ul#sortable’,

helper: ‘clone’,

revert: false } );

Más en el próximo artículo, Dropable & Sortable…

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

1 Comment

  • jose luis

    Reply Reply 4 abril, 2011

    Fundamental script para webs 2.0 que permitan personalizar él contenido a mostrar

Leave A Response

* Denotes Required Field