Question

我正在使用jQuery Sortable（http://johnny.github.io/jquery-sortable/）来显示嵌套列表，移动元素然后保存最终结果。最终目标是通过使用drag＆amp; amp;显示类别和页面来管理站点结构/层次结构。放弃可能性。

显示列表，拖放元素并保存输出正常。我现在想检测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>

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

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

如果覆盖onDrop，看起来super是需要调用的回调。用此替换您的onDrop功能，它可以正常工作。

http://jsfiddle.net/xdjn2wqp/2/

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

Answer 2

stop: function(event, ui) {
    console.log('Sortable stop');
}

使用jQuery可排序检测丢弃

2 个答案: