使用jQuery可排序检测丢弃

Question

我使用jQuery可排序(打http://johnny.github.io/jquery-sortable/),以显示嵌套列表,移动元素,然后保存最终的结果.最终目标是通过显示具有拖放可能性的类别和页面来管理站点结构/层次结构.

显示列表,拖放元素和保存输出工作正常.我现在想检测drop事件以指示哪些元素已被移动.这将有助于我避免更新整个网站结构,而只有少数元素移动.

我的嵌套列表如下所示:

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

李都是可以丢弃和拖延的

一切都初始化为:

<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不接受外部文件.

UPDATE2 我已经尝试过使用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/

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