Draggable, Dropable & Sortable en JQuery – 02

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

DROPABLE

Las opciones completas del dropable podemos encontrarlas aquí (http://docs.jquery.com/UI/Droppable) pero igual que he hecho con el dragable pondré algunas opciones que me parecieron más interesantes:

  • accept, especificas que elementos draggables aceptas que puedan ser depositados en el dropable.
  • hoverClass, puedes hacer que cambie la clase del elemento dropable en el momento que situes el draggable encima, permite hacer efectos interesantes como cambiar el color del elemento para indicarle que esta aceptando ese elmento al usuario.
  • drop, lo mas importante, es lo que se ejecutara una vez se deposite el draggable en este dropable.
  • actívate/deactivate, función que ejecutara al seleccionar/soltar un draggable aceptado por este element.
  • over/out, función que ejecutara al arrastrar el draggable encima/fuera del dropable.

Ejemplo:

jQuery( “.dropdiv-element” ).droppable({

accept: “.draggable”,

hoverClass: ‘hovered’,

drop: function( event, ui ) {   /*acciones*/ }});

Como vemos el drop tiene una function que recibe dos parametros, eso nos permite saber cosas como por ejemplo datos del elemento draggable q estamos insertando. Ex: jQuery(ui.draggable).attr(“id”).

SORTABLE

Las opciones completas de este tipo de elemento las encontraras en esta página (http://docs.jquery.com/UI/Sortable)  pero aquí especificare algunas que me parecieron interesantes:

  • revert, hace que al soltar el elemento dentro del sortable este se desplace hacia su posición final en lugar de aparecer directamente. Los valores pueden ser true o false.
  • accept y opacity, igual que en un elemento dropable.
  • placeholder, mientras estas moviendo el elemento interior del sortable este se ve colocado en el sitio que acabaría.
  • stop/beforeStop/update/over/out, las funciones que ejecutara en caso de parar de arrastrar el elemento dentro del sortable, en el momento justo antes de parar de arrastrar, en el momento que se actualice el orden de los elementos del sortable, mientras el elemento este siendo arrastrado dentro del sortable y en el caso de que el elemento este siendo arrastrado fuera del sortable.

Ejemplo:

jQuery(“#sortable”).sortable({

revert: true

accept: ‘.draggable’,

opacity: 0.6,

placeholder: ‘placeholder’,

stop:            function(event, ui) {},

beforeStop: function(event, ui) { },

update : function (event, ui) { } ,

over: function(event, ui) { },

out: function(event, ui){},

receive: function(event, ui) { }

});

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

1 Comment

  • Sergio

    Reply Reply 2 noviembre, 2011

    Hola que tal, llevo dias buscando la forma de poder hacer sortable un boton, alguien tiene idea de como se hace?, e podido hacer que un div se mueva, que una lista se mueva y que una tabla se mueva pero no puedo hacer lo mismo para un boton, alguien sabe como hacer esto?.. Muchas gracias de antemano!

Leave A Response

* Denotes Required Field