Tagged: sortable RSS Toggle Comment Threads | Keyboard Shortcuts

• 

  Dídac 5:00 am on April 5, 2011 Permalink
  Tags: sortable   

  Draggable, Dropable & Sortable en JQuery – 02 

  Tweet

  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) { }

  });

  Sergio is discussing. Toggle Comments

   
  • 

    Sergio 4:09 pm on November 2, 2011 Permalink | Reply

    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!
• 

  Dídac 5:00 am on April 4, 2011 Permalink
  Tags: sortable   

  Draggable, Dropable & Sortable en JQuery – 01 

  Tweet

  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…

  jose luis is discussing. Toggle Comments

   
  • 

    jose luis 6:07 am on April 4, 2011 Permalink | Reply

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