Advanced Search

Crear listas usando Drag & Drop y ordenarlas con jQuery UI

/ Published in: jQuery
Save to your folder(s)
Con esta líneas de programación, puedes crear listas Drag & Drop utilizando jQuery UI; permitiendo al usuario reorganizar los "items" seleccionados.

El funcionamiento interno, permite el envío usando un formulario ya sea por GET o POST.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //Arrastrar items
  2. $('.supermercado div,.lista div').draggable({
  3.     cursor: 'pointer',
  4.     connectWith: '.lista',
  5.     helper: 'original',
  6.     opacity: 0.5,
  7.     zIndex: 99,
  8.     revert: true
  9. });
  10.  
  11.  
  12. //Reordenamiento de los items
  13. $('.lista,.supermercado').sortable({
  14.     connectWith: '.lista,.supermercado',
  15.     cursor: 'pointer'
  16. }).droppable({
  17.     accept: '.supermercado div',
  18.     activeClass: 'highlight',
  19.     drop: function(event, ui) {
  20.         var $li = $('<div value="' + ui.draggable.attr("value") + '">').html(ui.draggable.html());
  21.         $li.appendTo(this);
  22.         ui.draggable.hide();
  23.         valores();
  24.     }
  25. });
  26.  
  27. function valores() {
  28.     var valores = "";
  29.     $('.lista div').each(function() {
  30.         valores += $(this).attr("value") + ",";
  31.     });
  32.     $("#productos").val(valores.substr(0,(valores.length-1)));
  33. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.