Detect Drop mit jQuery sortierbar

Question

Ich spiele mit jQuery Sortable (http://johnny.github.io/jquery-sortable/), um verschachtelte Listen anzuzeigen, Elemente zu verschieben und dann die endgültigen Ergebnisse zu speichern. Das endgültige Ziel besteht darin, eine Website-Struktur/Hierarchie zu verwalten, indem Kategorien und Seiten mit Drag-Optionen angezeigt werden.

Anzeige der Liste, Drag & Drop-Elemente und Speichern der Ausgabe funktioniert gut. Ich möchte nun Drop-Events erkennen, um anzuzeigen, welche Elemente verschoben wurden. Dies würde mir helfen, die Aktualisierung der gesamten Seitenstruktur zu vermeiden, während nur wenige Elemente verschoben wurden.

Meine verschachtelte Liste sieht wie folgt aus:

<ol id="structure" class="tree serialization"> 
    <li class="placeholder-children ui-droppable"> 
    LABEL 
    <ol> 
     <li class="placeholder-children ui-droppable">LABEL</li> 
     <li class="placeholder-children ui-droppable">LABEL 
     <ol> 
      <li class="placeholder-children ui-droppable">LABEL</li> 
     </ol> 
     </li> 
    </ol> 
    </li> 
</ol> 

LI sind alle abwerfbaren und ziehbar

alles mit initialisiert:

<script> 
    $(function () 
    { 
     $("ol.tree").sortable(); 
    }) 
</script> 

Jetzt kommt der schwierige Teil, ich versuche zu erkennen, Ereignisse fallen lassen.

Hier finden Sie ein überhaupt nicht arbeiten:

$(".placeholder-children").droppable({ 
drop: function(event, ui) { 
alert('dropped'); 
} 
}); 
}); 

Dieser funktioniert aber friere meine Seite:

<script> 
$("ol.tree").sortable(
      { 
       group: 'serialization', 
       onDrop: function (item, container, _super) 
        { 
         alert('dropped!'); 
        } 
      }); 
</script> 

Dieser Code löst den erwarteten Alarm, aber die ziehen friert ein und ich kann‘ t modifiziere nichts mehr in meiner Liste. Es ist so, als wäre der ganze Bildschirm eingefroren, da ich mich nicht mehr bewegen oder klicken kann. Ich muss die Seite neu laden.

Hinweis: ohne die Warnung, es friert auch ein.

Irgendeine Idee?

UPDATE: ich einen JSfiddle hinzugefügt haben: http://jsfiddle.net/t9mp80yw/ aber ich weiß nicht, wie die JS-Datei aufrufen, sodass das Skript initialisiert werden kann. Ich habe versucht, die Datei auf meinem Server gehostet, aber es sieht aus wie jsfiddle keine externen Dateien akzeptiert.

UPDATE2 Ich habe das Skript mit Firefox und Internet Explorer, das gleiche Problem versucht.

Vielen Dank

Laurent

PS: hier nicht gezeigt, aber jQuery, jQuery UI, jQuery Sortable richtig

Answer 1

Die onDrop Funktion muss man bestimmte Dinge tun geladen.

Von http://johnny.github.io/jquery-sortable/#nested

onDrop: function (item, container, _super) { 
    container.el.removeClass("active") 
    _super(item) 
} 

Es wie super aussieht, ist ein Rückruf, der aufgerufen werden muss, wenn Sie onDrop außer Kraft setzen. Ersetzen Sie Ihre onDrop Funktion mit dieser und es funktioniert.

http://jsfiddle.net/xdjn2wqp/2/

Der beste Weg, eine neue Bibliothek zu lernen, ist in einigen ihrer Arbeits Beispiel-Code und gehen von dort einzufügen.