jQuery sortable onDrop 事件冻结页面答案

【问题标题】：jQuery sortable onDrop event freezes the pagejQuery sortable onDrop 事件冻结页面
【发布时间】：2018-09-17 12:48:24
【问题描述】：

我正在使用jQuery Sortable 库创建可重新排列的嵌套<ol> 元素（不要与jQuery UI sortable 混淆），当我尝试在onDrop 事件中执行代码（console.log）时，页面冻结，并且被拖动的<li> 元素变为透明并漂浮在页面上的其他元素之上（类似于position: absolute 和opacity: 0.5）

工作示例： https://johnny.github.io/jquery-sortable/#features

我的代码： http://jsfiddle.net/xdjn2wqp/2/

【问题讨论】：

您的代码应发布在问题本身中，因为链接可能会失效，用户不必访问第三方网站即可查看您的代码。
我认为当代码本身太长而无法发布在问题上时，这是一个很好的做法，并且许多高级用户使用可靠的第三方代码共享服务，如 codepen 和 jsfiddle
唯一重要的代码是 javascript、CSS 和 HTML，它们是次要的，反正也没那么大。 SO 也有自己的代码演示服务，称为 stacksn-ps（只需点击编辑器中的代码按钮）。只有当您的代码无法通过 stacksn-ps 演示时，才真正需要 Codepen 和其他网站。
我还是用第三方工具，他们提供更好的代码编辑工具，比如语法高亮、自动补全、实时预览和一堆stacksn-ps没有的东西

标签： javascript jquery html nested-sortable

【解决方案1】：

在测试您的代码时，我没有遇到页面冻结，但是被拖动的元素在拖放后从未从其中删除 .dragged 类。也许你的意思是它似乎冻结了。

在执行代码时，无论哪种方式，您都会在控制台上收到错误

未捕获的类型错误：无法读取未定义的属性“组”

查看代码，_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>

【讨论】：