Question

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

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

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

Answer 1

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

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

未捕获的TypeError：无法读取属性＆＃39; group＆＃39;未定义的

在查看代码时，_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，问题就不再存在

＆＃13;

$(".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)
    }
  });
})

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery可排序onDrop事件冻结页面

1 个答案: