Wykryj upuszczanie za pomocą jQuery sortable

Question

Gram z jQuery Sortable (http://johnny.github.io/jquery-sortable/), aby wyświetlić zagnieżdżone listy, przenieść elementy, a następnie zapisać ostateczne wyniki. Ostatecznymi celami jest zarządzanie strukturą/hierarchią witryny poprzez wyświetlanie kategorii i stron z możliwością przeciągnięcia &.

Wyświetlenie listy, przeciąganie i upuszczanie elementów i zapisywanie danych wyjściowych działa poprawnie. Chciałbym teraz wykryć zdarzenia upuszczenia, aby wskazać, które elementy zostały przeniesione. Pomogłoby mi to uniknąć aktualizacji całej struktury witryny, podczas gdy tylko kilka elementów zostało przeniesionych.

Moja zagnieżdżona lista wygląda następująco:

<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 są droppable i przeciągany

wszystko jest inicjowany z:

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

Teraz przychodzi trudny część, staram się wykryć upuść zdarzenia.

Poniżej jeden nie działa w ogóle:

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

Ten działa jednak zamraża moją stronę:

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

Ten kod wywołuje oczekiwaną alertu ale przeciąganie zamarza i mogę” t modyfikować niczego na mojej liście. To tak, jakby cały ekran został zamrożony, ponieważ nie mogę już nic ruszać ani klikać. Muszę przeładować stronę.

Uwaga: bez alertu również zawiesza się.

Każdy pomysł?

UPDATE: Dodałem JSfiddle: http://jsfiddle.net/t9mp80yw/ ale nie wiem jak nazwać plik js tak, że skrypt może zostać zainicjowany. Próbowałem dodać plik hostowany na moim serwerze, ale wygląda na to, że jsfiddle nie akceptuje plików zewnętrznych.

UPDATE2 Próbowałem skryptu w Firefoksie i Internet Explorerze, ten sam problem.

Thanks a lot

Laurent

PS: Nie pokazano tutaj, ale jQuery, jQuery UI, jQuery Sortable są prawidłowo załadowane

Answer 1

Funkcja onDrop potrzebuje do robienia pewnych rzeczy.

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

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

wygląda jak super jest zwrotna, która musi być wywołana jeśli przesłonić onDrop. Zastąp swoją funkcję onDrop i działa.

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

Najlepszym sposobem, aby nauczyć się nowego biblioteki jest wklejenie w niektóre z ich pracy przykładowy kod i go stamtąd.