Assistente clone ordinabile non funzionante

Forse non capisco come funziona il clone con ordinabile, ma ecco cosa vorrei fare.Assistente clone ordinabile non funzionante

Quando si ordina un oggetto, vorrei che un clone dell'articolo che sto trascinando rimanga finché non smetto di rilasciare l'oggetto nella sua nuova posizione.

Ecco il codice:

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

Grazie in anticipo per l'aiuto!

fonte

2010-06-11 Jeremy Seekamp

Quando si utilizza l'opzione clone, l'elemento originale è nascosta con style="display: none" quando si inizia a trascinare. È possibile allegare un gestore all'evento sort (o qualunque evento nasconda l'elemento originale) per ri-mostrarlo. Tutto dovrebbe funzionare per te allora.

P.S. Ho usato Firebug per vedere cosa stava accadendo all'elemento originale. Se non lo stai usando, dovresti proprio esserlo!

fonte

2010-06-11 17:21:56

Mentre potrebbe non risolvere il problema riscontrato. C'è una virgola in più alla fine dei tuoi parametri.

opacity: '.5',

fonte

2010-06-11 17:15:29 Mike

Il suo solo modo di hackerarlo. Puoi guidare da qui in poi. Cambia la tua configurazione come di seguito.

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

fonte

2010-06-11 19:00:53 simplyharsh

+11

$ (ui.item) .Show() sarebbe piu 'accurata' – Vigrond

e $ (ui.helper) contiene l'helper clonato. Se si desidera modificarlo. – Armin

Ho due elenchi, ordinabile1 e ordinabile2. Voglio clonare elementi da ordinabile1 a ordinabile2 e viceversa.

Un miglioramento deve essere quello di verificare se si tratta di elemento superiore, se lo è. prev() non funzionerà. Quindi controllare se c'è un prev, se non usare after().

La mia soluzione era questa:

$("#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();

fonte

2011-06-21 13:11:00

Poche parole su miglioramenti che John Bledsoe ha detto. per la clonazione primi elementi a # sortable1 Io uso un tale codice:

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

fonte

2017-10-31 20:33:13

Assistente clone ordinabile non funzionante

risposta

Problemi correlati