L'assistant de clone triable ne fonctionne pas

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

Lors du tri d'un article que je voudrais un clone de l'article que je suis glisser rester jusqu'à ce que j'arrête de déposer l'objet 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 d'avance pour l'aide!

source d'informationauteur Jeremy Seekamp

12

Lorsque vous utilisez l'option cloner, l'élément d'origine est cachée avec style="display: none" lorsque vous commencez à faire glisser. Vous pouvez attacher un gestionnaire du type d'événement (ou quelque soit l'événement se cache l'élément d'origine) pour ré-afficher. Tout devrait fonctionner pour vous alors.

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

Ses juste une façon de le pirater. Vous pouvez vous entraîner à partir d'ici. Changement de la config ci-dessous.

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

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

Une amélioration pour vérifier si il est l'élément de plus haut niveau, si elle est. prev() ne fonctionnera pas.
Afin de vérifier si il y a un précédent, si pas utiliser après().

Ma solution était:

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

1

Alors qu'il pourrait ne pas résoudre le problème que vous rencontrez. Il y a une virgule supplémentaire à la fin de vos paramètres.
```
opacity: '.5',
```

Quelques mots sur les améliorations que Jean Bledsoe a dit.
Pour le clonage des premiers éléments de #sortable1 j'utilise ce code:

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

Vous devez vous connecter pour publier un commentaire.