JQuery嵌套可排序的chrome问题

Question

我一直在使用Johnny的扩展jquery sortable开发一个类似文件树的小部件,它比标准的JQuery更好地处理嵌套的sortable.

我有一个问题,用新数据重新初始化树.在Firefox中没有问题,但Chrome会起作用.这里可以看到一个最小的例子(或者在这里的jsfiddle)

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

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

• ✓火狐
• ✓Internetexplorer
• ✕铬

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