¿Cómo se duplica el artículo cuando se usa jquery ordenable?

Estoy usando este método http://jqueryui.com/demos/sortable/#connect-lists para conectar dos listas que tengo. Quiero ser capaz de arrastrar desde la lista A a la lista B, pero cuando se suelta, necesito mantener la original en la lista A. Revisé las opciones y los eventos, pero creo que no hay nada como eso. ¿Algún acercamiento?¿Cómo se duplica el artículo cuando se usa jquery ordenable?

Fuente

2011-08-04 odle

Buena odle cuestión. Tuve un momento difícil con los documentos sobre esto también. –

Tuve un momento difícil para encontrar una solución. Buena pregunta. –

Para empezar, have a look at this, y lea la respuesta de @Erez, también.

$(function() { 
    $("#sortable1").sortable({ 
     connectWith: ".connectedSortable", 
     remove: function (event, ui) { 
      ui.item.clone().appendTo('#sortable2'); 
      $(this).sortable('cancel'); 
     } 
    }).disableSelection(); 

    $("#sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
});

Fuente

2011-08-04 11:38:24 Thorsten

La desventaja de este enfoque es que no se conserva el orden de $ ('# sortable2'). Ex. si coloca un elemento en $ ('# sortable2') en la parte superior de la lista, esta solución mostrará el artículo caído en la parte inferior de la lista. La respuesta de Erez a continuación conserva la posición descartada y fue una solución mejor en mi caso de uso. –

$("#sortable1").sortable({ 
    connectWith: ".connectedSortable", 
    forcePlaceholderSize: false, 
    helper: function (e, li) { 
     copyHelper = li.clone().insertAfter(li); 
     return li.clone(); 
    }, 
    stop: function() { 
     copyHelper && copyHelper.remove(); 
    } 
}); 
$(".connectedSortable").sortable({ 
    receive: function (e, ui) { 
     copyHelper = null; 
    } 
});

Fuente

2012-09-30 06:11:36 Erez

Este enfoque es preferible a Thorsten ya que este conserva el orden de la lista original. –

¡Funciona a la perfección! Esto realmente debería marcarse como la respuesta correcta. –

Respuesta mucho mejor que la marcada como correcta. Esto copia y conserva el orden. – jkinz

solución de Erez' funciona para mí, pero he encontrado su falta de encapsulación frustrante. Me propongo utilizar la siguiente solución para evitar el uso de variables globales:

$("#sortable1").sortable({ 
    connectWith: ".connectedSortable", 

    helper: function (e, li) { 
     this.copyHelper = li.clone().insertAfter(li); 

     $(this).data('copied', false); 

     return li.clone(); 
    }, 
    stop: function() { 

     var copied = $(this).data('copied'); 

     if (!copied) { 
      this.copyHelper.remove(); 
     } 

     this.copyHelper = null; 
    } 
}); 

$("#sortable2").sortable({ 
    receive: function (e, ui) { 
     ui.sender.data('copied', true); 
    } 
});

Esto es un jsFiddle: http://jsfiddle.net/v265q/190/

Fuente

2013-11-07 18:31:36

El uso de un marcador de posición oculto en la primera lista le dará el rastro común del efecto de posición exacta, por ejemplo http://jsfiddle.net/BrianDillingham/v265q/320/ –

@BrianDillingham ¿Algún truco para que 'revert' funcione también? – JimmyBoh

Al utilizar la solución de Erez, pero para la conexión de 2 módulos de función se pueden ordenar (base era el código de ejemplo de portlets de http://jqueryui.com/sortable/#portlets) , el alternar en el clon no funcionaría. Agregué la siguiente línea antes de 'devolver li.clone();' para hacer que funcione

copyHelper.click(function() { 
    var icon = $(this); 
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); 
    icon.closest(".portlet").find(".portlet-content").toggle(); 
});

Esto me tomó un tiempo para entenderlo, así que espero que ayude a alguien.

Fuente

2015-01-14 20:28:57 user1505746

Sé que esto es viejo, pero no pude obtener la respuesta de Erez para trabajar, y Thorsten no lo cortó para el proyecto que lo necesito. Esto parece funcionar exactamente como lo necesito:

$("#sortable2, #sortable1").sortable({ 
    connectWith: ".connectedSortable", 
    remove: function (e, li) { 
     copyHelper = li.item.clone().insertAfter(li.item); 
     $(this).sortable('cancel'); 
     return li.clone(); 
    } 
}).disableSelection();

Fuente

2015-03-17 08:31:00 abuser2582707

sí, esta solución es mejor porque usa li.item para que pueda usarse con múltiples elementos. Gracias, me ayudó. – themis

Esta es la mejor respuesta, gracias. –

La respuesta de abuser2582707 funciona mejor para mí. Excepto un error: Es necesario cambiar el regreso a

return li.item.clone();

lo que debe ser:

$("#sortable2, #sortable1").sortable({ 
    connectWith: ".connectedSortable", 
    remove: function (e, li) { 
     li.item.clone().insertAfter(li.item); 
     $(this).sortable('cancel'); 
     return li.item.clone(); 
    } 
}).disableSelection();

Fuente

2017-05-07 10:53:23 creativecat

¿Cómo se duplica el artículo cuando se usa jquery ordenable?

Respuesta

Cuestiones relacionadas