Событие сортировки jQuery onDrop останавливает страницу

Question

Я использую библиотеку jQuery Sortable для создания перестраиваемых вложенных <ol> элементы (не путайте с сортируемым jQuery UI), когда я пытаюсь выполнить код (console.log) в onDrop событие, страница зависает, и перетаскивается <li> элемент становится прозрачным и плавает на странице поверх других элементов (аналогично position: absolute а также opacity: 0.5)

Рабочий пример: https://johnny.github.io/jquery-sortable/

Мой код: http://jsfiddle.net/xdjn2wqp/2/

Answer 1

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

В любом случае при выполнении вашего кода вы получаете ошибку на консоли

Uncaught TypeError: Невозможно прочитать свойство 'группа' из неопределенного

И, глядя на код, метод _super определен, чтобы иметь до 4 аргументов, но похоже, что он требует всего 2

http://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js

onDrop: function(a, b, c, e) {
  a.removeClass(b.group.options.draggedClass).removeAttr("style");
  d("body").removeClass(b.group.options.bodyClass)
},

Не минимизированная версия

http://johnny.github.io/jquery-sortable/js/jquery-sortable.js

onDrop: function ($item, container, _super, event) {
   $item.removeClass(container.group.options.draggedClass).removeAttr("style")
   $("body").removeClass(container.group.options.bodyClass)
},

Однако вы проходите только 1 пункт. И со страницы документации все примеры, которые используют _super() использовать два аргумента, элемент, а затем контейнер

_super(item,container)

Так что, как только вы проходите в container а проблема больше не существует

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

  $("ol.tree").sortable({
    group: 'serialization',
    onDrop: function(item, container, _super) {
      alert("a");
      container.el.removeClass("active")
      _super(item, container)
    }
  });
})

body.dragging,
body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.tree {
  background-color: #FFF;
  margin: 10px;
  padding: 10px;
}

ol {
  list-style-type: none;
  list-style: none;
}

ol li {
  background: none repeat scroll 0 0 #eeeeee;
  border: 1px solid #cccccc;
  color: #0088cc;
  display: block;
  margin: 5px;
  padding: 5px;
  line-height: 18px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>
<ol class="tree serialization">
  <li class="placeholder-children">First
    <ol></ol>
  </li>
  <li class="placeholder-children">Second
    <ol></ol>
  </li>
  <li class="placeholder-children">Third
    <ol>
      <li class="placeholder-children">First</li>
      <li class="placeholder-children">Second</li>
      <li class="placeholder-children">Third
        <ol>
          <li class="placeholder-children">First</li>
          <li class="placeholder-children">Second</li>
        </ol>
        <ol>
          <li class="placeholder-children">First</li>
          <li class="placeholder-children">Second</li>
        </ol>
      </li>
    </ol>
  </li>
  <li class="placeholder-children">Fourth</li>
  <li class="placeholder-children">Fifth</li>
  <li class="placeholder-children">Sixth</li>
</ol>