JQuery 嵌套可排序 chrome 问题

Question

我一直在使用Johnny's extended jquery sortable开发一个类似文件树的小部件。 ，它比标准 JQuery 更好地处理嵌套排序。

我在使用新数据重新初始化树时遇到问题。 firefox下没问题，chrome下就出问题了。 A minimal example can be seen here (或on jsfiddle here)

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

因此，Firefox 对这个解决方案感到满意，但在 chrome 中，一旦我拖放一次，并且树被重新初始化，下一次拖动将失败，并出现 Uncaught TypeError: Cannot read property 'group ' 未定义

• ✓ 火狐
• ✓ 互联网浏览器
• ✕ 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>