jQuery sortable onDrop 事件冻结页面

Question

我正在使用 jQuery Sortable library to create rearrangeable nested <ol> elements (do not confuse with jQuery UI sortable)，当我尝试在 onDrop 事件中执行代码 (console.log) 时，页面冻结，并且拖动 <li>元素变得透明并漂浮在页面上的其他元素之上（类似于 position: absolute 和 opacity: 0.5）

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

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

Answer 1

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

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

Uncaught TypeError: Cannot read property 'group' of undefined

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

Non-minified版本

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>

jQuery sortable onDrop 事件冻结页面

jQuery sortable onDrop event freezes the page

html

javascript

jquery

nested-sortable