Обнаружение падения с помощью 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 правильно загружены
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/
лучший способ узнать новую библиотеку-вставить некоторые из их рабочих примеров кода и перейти от там.