Rileva drop con jQuery ordinabile

Question

Sto giocando con jQuery Sortable (http://johnny.github.io/jquery-sortable/) per visualizzare elenchi annidati, spostare elementi e quindi salvare i risultati finali. L'obiettivo finale è gestire una struttura/gerarchia del sito visualizzando categorie e pagine con trascinamento delle possibilità di rilascio da &.

Visualizzazione dell'elenco, trascinamento e rilascio di elementi e salvataggio dell'uscita funziona correttamente. Ora vorrei rilevare gli eventi di rilascio per indicare quali elementi sono stati spostati. Questo mi aiuterebbe ad evitare di aggiornare l'intera struttura del sito mentre solo alcuni elementi si sono spostati.

mia lista annidata si presenta così:

<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 sono tutti droppable e trascinabili

tutto viene inizializzato con:

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

Ora viene la parte difficile, cerco di rilevare abbandonare gli eventi.

Di seguito uno non funziona affatto:

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

questo funziona, ma si blocca la mia pagina:

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

Questo codice attiva l'avviso previsto, ma si blocca trascinando e posso' t modificare più nulla nella mia lista. È come se lo schermo intero fosse congelato perché non posso più muovermi o fare clic più nulla. Ho bisogno di ricaricare la pagina per uscirne.

Nota: senza l'avviso, si blocca anche.

Qualche idea?

UPDATE: Ho aggiunto un JSfiddle: http://jsfiddle.net/t9mp80yw/ ma non so come chiamare il file .js in modo che lo script può essere inizializzato. Ho provato ad aggiungere il file ospitato sul mio server ma sembra che jsfiddle non accetti file esterni.

UPDATE2 Ho provato lo script con Firefox e Internet Explorer, lo stesso problema.

Grazie mille

Laurent

PS: non è riportato, ma jQuery, jQuery UI, jQuery ordinabili siano caricati correttamente

Answer 1

La funzione onDrop ha bisogno di fare certe cose.

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

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

Sembra Super è un callback che deve essere chiamato se si ignora onDrop. Sostituisci la tua funzione onDrop con questo e funziona.

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

Il modo migliore per imparare una nuova libreria è quello di incollare in alcuni dei loro codice di esempio di lavoro e passare da lì.

L'avviso