Sortierbare clone helper funktioniert nicht

Vielleicht ich verstehe nicht, wie Klonen funktioniert mit Sortier -, aber hier ist, was ich gerne tun würde.

Beim Sortieren ein Element, ich würde wie ein Klon von dem Artikel, den ich am ziehen bleiben, bis ich stop drop das Element in die neue position.

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

Vielen Dank im Voraus für die Hilfe!

InformationsquelleAutor Jeremy Seekamp | 2010-06-11

12

Wenn Sie die option kopieren, das original-item ist versteckt mit style="display: none" wenn Sie mit dem ziehen begonnen. Man könnte anfügen eine Prozedur zum Sortieren event (oder was auch immer Fall verbirgt sich das ursprüngliche Element) re-show. Alles sollte für Sie dann.

P. S. ich verwendet Firebug, zu sehen, was geschehen war, um das ursprüngliche element. Wenn Sie nicht mit dem es Sie wirklich sein sollte!

InformationsquelleAutor John Bledsoe

Seine nur einen Weg, es zu hacken. Sie können von dort aus führen. Ändern Sie die Konfigurationsdatei wie unten.

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

$(ui.Element).show() wäre mehr "präzise"
Und $(ui.Helfer) enthält die geklonten Helfer. Wenn Sie möchten, um es zu ändern.

InformationsquelleAutor simplyharsh

Ich habe zwei Listen, sortable1 und sortable2.
Ich will Klonen von Elementen aus sortable1 zu sortable2 und Umgekehrt.

Einer Verbesserung zu überprüfen, ob es sich um top-element, wenn es so ist. prev() wird nicht funktionieren.
So überprüfen Sie, ob es ein zurück, wenn Sie nicht verwenden, nach().

Meine Lösung war diese:

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

InformationsquelleAutor Viktor Eriksson

1

Während es möglicherweise nicht das Problem beheben. Es gibt ein zusätzliches Komma am Ende Ihrer Parameter.
```
opacity: '.5',
```
InformationsquelleAutor Mike
1

Paar Worte über Verbesserungen, John Bledsoe sagte.
Für das Klonen von ersten Elementen in #sortable1 ich einen solchen code:
```
    stop:function(event, ui){
        if (before.length) before.after(clone);
        else $(this).prepend(clone);
    },
```
InformationsquelleAutor Павел П

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.