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.


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.