JQuery 嵌套可排序 chrome 问题

Question

我一直在使用 Johnny's extended jquery sortable 开发类似文件树的小部件，它比标准 JQuery.

更好地处理嵌套排序

我在使用新数据重新初始化树时遇到问题。在 firefox 中没有问题，但是 chrome 出现了问题。 A minimal example can be seen here (or on jsfiddle here)

在onDrop 回调中，树被重新初始化。为简洁起见，所有发生的都是 console.log，但在我的实际示例中，数据通过 ajax 发布到服务器，并且响应有新数据来更新树。

所以，Firefox 对这个解决方案很满意，但是在 chrome 中，一旦我拖放一次，树被重新初始化，下一次拖动将失败 Uncaught TypeError: Cannot read property 'group' of undefined

• ✓ 火狐浏览器
• ✓ 互联网浏览器
• ✕ Chrome

Answer 1

如果您每次在初始化该元素之前销毁 sortable，它将起作用：

function init(e) {
    // First of all - we destroy the sortable
    $('ul').sortable('destroy');

    var root = $('<ul></ul>')
    createNodes(root)
    e.html(root)
    root.sortable({
        group: 'foo',
        onDrop: function ($item, container, _super, event) {
            // These two lines are default behaviour of the plugin
            $item.removeClass(container.group.options.draggedClass).removeAttr("style");
            $("body").removeClass(container.group.options.bodyClass);

            console.log('Updating')
            init(e)
        }
    })
}

工作片段：

function createNodes(e) {
  var foo = $('<li>Foo<ul></ul></li>');
  var bar = $('<li>Bar<ul></ul></li>');
  var baz = $('<li>Baz<ul></ul></li>');
  bar.find('ul').append(baz);
  e.append(foo, bar);
}

function init(e) {
  // First of all - we destroy the sortable
  $('ul').sortable('destroy');
  
  var root = $('<ul></ul>')
  createNodes(root)
  e.html(root)
  root.sortable({
    group: 'foo',
    onDrop: function ($item, container, _super, event) {
        // These two lines are default behaviour of the plugin
        $item.removeClass(container.group.options.draggedClass).removeAttr("style");
        $("body").removeClass(container.group.options.bodyClass);

        console.log('Updating')
        init(e)
    }
  })
}

$(document).ready(function(){
  init($('#myroot'))
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<div id="myroot">
</div>