Question

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

我遇到了使用新数据重新初始化树的问题。在Firefox中没有问题，但Chrome会起作用。 A minimal example can be seen here（或on jsfiddle here）

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

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

✓Firefox
✓Internetexplorer
✕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>

JQuery嵌套可排序的chrome问题

1 个答案: