Asistente de clonación no funcionable

Quizás no entiendo cómo funciona el clon con ordenable, pero esto es lo que me gustaría hacer.Asistente de clonación no funcionable

Al ordenar un artículo, me gustaría que un clon del artículo que estoy arrastrando permanezca hasta que deje de colocar el artículo en su nueva posición.

Aquí está el código:

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

    <style type="text/css"> 
     .sort { width: 150px; } 
     .ui-state-highlight { background-color: #000; height:2px; } 
    </style> 
</head> 
<body> 
    <div> 
     <ul class="sort"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </ul> 
    </div> 

    <script type="text/javascript"> 
     $(function() { 
      $('.sort').sortable({ 
       helper: 'clone', 
       placeholder: 'ui-state-highlight', 
       opacity: '.5' 
      }) 
     }) 
    </script> 
</body> 
</html>

Gracias de antemano por la ayuda!

Fuente

2010-06-11 Jeremy Seekamp

Cuando se utiliza la opción clon, el elemento original se oculta con style="display: none" cuando se inicia arrastrando. Puede adjuntar un controlador al evento sort (o cualquier evento que oculte el elemento original) para volver a mostrarlo. Todo debería funcionar para ti entonces.

P.S. Usé Firebug para ver lo que sucedía con el elemento original. ¡Si no lo estás usando, realmente deberías!

Fuente

2010-06-11 17:21:56

Aunque puede que no solucione el problema que está teniendo. Hay una coma adicional al final de tus parámetros.

opacity: '.5',

Fuente

2010-06-11 17:15:29 Mike

Es solo una forma de hackearlo. Puedes liderar de aquí en adelante. Cambie su configuración de la siguiente manera.

 $('.sort').sortable({ 
      helper: 'clone', 
      placeholder: 'ui-state-highlight', 
      opacity: '.5', 
      start: function(event, ui) { 
       $('.sort').find('li:hidden').show(); 
      } 
     })

Fuente

2010-06-11 19:00:53 simplyharsh

+11

$ (ui.item) .show() sería más 'exacta' – Vigrond

Y $ (ui.helper) contiene el ayudante clonado. Si desea modificarlo – Armin

Tengo dos listas, sortable1 y sortable2. Quiero clonar elementos de sortable1 a sortable2 y viceversa.

Una mejora tiene que ser comprobar si es el elemento superior, si es así. prev() no funcionará. Así que verifique si hay un anterior, si no lo usa después de().

Mi solución fue la siguiente:

$("#sortable1").sortable({ 
     helper:"clone", 
     connectWith: "#sortable2", 
     start:function(event,ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection(); 
$("#sortable2").sortable({ 
     helper:"clone", 
     connectWith: "#sortable1", 
     start: function(event, ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection();

Fuente

2011-06-21 13:11:00

pocas palabras acerca de las mejoras que se dice que John Bledsoe. Para la clonación primeros elementos en # sortable1 Puedo usar un código de este tipo:

stop:function(event, ui){ 
     if (before.length) before.after(clone); 
     else $(this).prepend(clone); 
    },

Fuente

2017-10-31 20:33:13

Asistente de clonación no funcionable

Respuesta

Cuestiones relacionadas