Aide clone triable ne fonctionne pas

Peut-être que je ne comprends pas comment fonctionne clone avec triable, mais voici ce que je voudrais faire.Aide clone triable ne fonctionne pas

Lors du tri d'un article, je voudrais qu'un clone de l'article que je fais glisser reste jusqu'à ce que j'arrête de déposer l'article dans sa nouvelle position.

Voici le code:

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

Merci à l'avance pour l'aide!

Source

2010-06-11 Jeremy Seekamp

Lorsque vous utilisez l'option clone, l'élément d'origine est cachée avec style="display: none" lorsque vous commencez à faire glisser. Vous pouvez attacher un gestionnaire à l'événement de tri (ou à tout autre événement masquant l'élément d'origine) pour le représenter. Tout devrait fonctionner pour vous alors.

P.S. J'ai utilisé Firebug pour regarder ce qui se passait à l'élément d'origine. Si vous ne l'utilisez pas, vous devriez vraiment l'être!

Source

2010-06-11 17:21:56

Bien qu'il ne puisse pas résoudre le problème que vous rencontrez. Il y a une virgule supplémentaire à la fin de vos paramètres.

opacity: '.5',

Source

2010-06-11 17:15:29 Mike

C'est juste une façon de le pirater. Vous pouvez mener à partir d'ici. Changez votre config comme ci-dessous.

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

Source

2010-06-11 19:00:53 simplyharsh

+11

$ (ui.item) .show() serait plus 'précis' et – Vigrond

$ (ui.helper) contient l'aide cloné. Si vous souhaitez le modifier. – Armin

J'ai deux listes, triable1 et triable2. Je veux cloner des éléments de sortable1 à sortable2 et vice versa.

Une amélioration doit être de vérifier si c'est l'élément supérieur, si c'est le cas. prev() ne fonctionnera pas. Donc, vérifiez s'il y a un prev, sinon utilisez after().

Ma solution était la suivante:

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

Source

2011-06-21 13:11:00

Quelques mots sur les améliorations que John a dit Bledsoe. Pour le clonage premiers éléments # sortable1-je utiliser un tel code:

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

Source

2017-10-31 20:33:13

Aide clone triable ne fonctionne pas

Répondre

Questions connexes