Обнаружение падения с помощью jQuery sortable

Я играю с сортировкой jQuery (http://johnny.github.io/jquery-sortable/) чтобы отобразить вложенные списки, переместите элементы и сохраните окончательные результаты. Конечные цели-управление структурой/иерархией сайта путем отображения Категорий и страниц с возможностями перетаскивания.

отображение списка, перетаскивание элементов и сохранение вывода работает нормально. Теперь я хотел бы, чтобы обнаружить события, чтобы указать, какие элементы были перенесены. Это помогите мне избежать обновления всей структуры сайта, пока только несколько элементов переместились.

мой вложенный список выглядит так:

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

ли все droppable и draggable

все инициализируется с:

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

сейчас идет сложная часть, я пытаюсь обнаружить события.

следующий не работает вообще:

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

это работает, но замораживает мою страницу:

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

этот код запускает ожидаемое предупреждение, но перетаскивание зависает, и я больше не могу ничего изменять в своем списке. Это похоже на то, что весь экран заморожен, поскольку я больше не могу двигаться или нажимать что-либо. Мне нужно перезагрузить страницу.

Примечание: без предупреждения, он же замерзнет.

есть идеи?

обновление: Я добавил JSfiddle: http://jsfiddle.net/t9mp80yw/ но я не знаю, как назвать .JS-файл, чтобы скрипт мог быть инициализированный. Я попытался добавить файл, размещенный на моем сервере, но похоже, что jsfiddle не принимает внешние файлы.

обновление 2 Я пробовал скрипт с Firefox и Internet Explorer, та же проблема.

Спасибо большое

Лорен

PS: не показано здесь, но jQuery, jQuery UI, jQuery Sortable правильно загружены

10
jquery jquery-ui jquery-ui-sortable

1 ответов

функция onDrop нуждается в вас, чтобы сделать определенные вещи.

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

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

похоже, что super-это обратный вызов, который нужно вызвать, если вы переопределите onDrop. Заменить onDrop функция с этим и работает.

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

лучший способ узнать новую библиотеку-вставить некоторые из их рабочих примеров кода и перейти от там.

3