jquery - 使用 jQuery sortable 检测 drop

Question

我正在使用 jQuery Sortable ( 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>

LI 都是可放置和可拖动的

一切都初始化为:

<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 已正确加载

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

学习新库的最佳方法是粘贴一些工作示例代码并从那里开始。