jquery之从 jQuery DataTables 拖动到 jQuery NestedSortable

我试图在 jQuery DataTable 和 jQuery NestedSortable 之间拖动。问题是，当我删除可拖动对象(从 DataTable 中)时，它会恢复为表行，而不是 li 对象(以适合nestedSortable)。 jsFiddle 的一个示例是 here 。我理想的场景是这样的jQuery UI example ，但源是数据表，目标是嵌套排序...

我找到了这个fix通过为可拖动插件创建我自己的“connectWith”选项来连接两个元素，这样我就可以从表格中放入可排序元素。

我还弄清楚了如何使用 custom helper使占位符看起来就像是一个 li 对象，但我不知道如何使放置对象等于助手，而不是原始表行。我尝试过使用 .draggable(stop)、.nestedSortable(stop) 和 .nestedSortable(receive) 事件中的内容，但没有运气。有人可以指出我正确的方向吗？我在文档中遗漏了什么吗？

谢谢!祝所有正在阅读本文的人节日快乐...

我的基本代码:

$('#example_table').dataTable({ 
    'sPaginationType': 'full_numbers', 
    'bJQueryUI':true 
}); 
 
$('ol.sortable').nestedSortable({ 
    forcePlaceholderSize: true, 
    handle: '.disclose', 
    helper: 'clone', 
    items: 'li', 
    opacity: .6, 
    placeholder: 'placeholder', 
    revert: true, 
    tabSize: 25, 
    tolerance: 'pointer', 
    toleranceElement: '> div', 
    maxLevels: 4, 
    isTree: true, 
    expandOnHover: 700, 
    startCollapsed: true, 
    stop: function(e, ui) { 
    }, 
    connectWith: '#example_table', 
    receive: function( e, ui ) { 
    } 
}); 
 
$( '#example_table > tbody > tr').draggable({ 
    connectToNestedSortable: "#structure", 
    helper: function( event ) { 
        var _this = $(this); 
        var name_col = _this.find('.name_col') 
        .children('span'); 
        var name = name_col.text(); 
        var new_ele = $('<li></li>') 
            .addClass('mjs-nestedSortable-branch') 
            .addClass('mjs-nestedSortable-collapsed') 
            .append('<div></div>') 
            .append('<span><i class="fa fa-plus"></i></span>' + name); 
        return new_ele.clone(); 
    }, 
    revert: "invalid", 
    stop: function ( event, ui ) { 
        $(ui.item).replaceWith(ui.helper); 
    } 
}); 

<小时 />

更新

我知道有很多关于如何更改 jQuery 中的可拖动对象的线程，因此只是记录一些我尝试过的内容(尚未成功):

Attaching to the sortable stop method ，带有一个标记已删除项目的自定义类。

stop: function(e, ui) { 
    if (ui.item.hasClass('fromtable')) { 
        //clone and remove positioning from the helper element 
        var newDiv = $(ui.helper).clone(false) 
        .removeClass('fromtable'); 
 
        ui.item.replaceWith(newDiv); 
    } 
}, 

Using the sortable update event :

update: function(e, ui) { 
    if (ui.item.hasClass('fromtable')) { 
        //clone and remove positioning from the helper element 
        $(this) = $(ui.helper).clone(false) 
        .removeClass('fromtable'); 
    } 
}, 

Using both droppable and nestedSortable (这会留下重影，但它确实会掉落一些看起来像 li 的东西......可能是在正确的方向):

$('ol.sortable').droppable({ 
    drop: function(e, ui) { 
        var new_item = ui.helper.clone(); 
        $(this).append(new_item); 
    } 
}).nestedSortable({etc... 

请您参考如下方法:

好的，所以尝试一下其他第一个SO问题I linked to ，问题是我试图克隆 ui.helper 对象，假设它仍然存在(因为可拖动助手正在工作)。但是，nestedSortable ui.helper 对象似乎为 null(并且不像我想象的那样自动等于draggable ui.helper 对象)，因此我必须在 stop 方法中重建 helper 对象。我的最终代码如下所示(需要清理冗余)，并在 jsFiddle here 上工作.

$('#example_table').dataTable({ 
    'sPaginationType': 'full_numbers', 
    'bJQueryUI':true 
}); 
 
$('ol.sortable').nestedSortable({ 
    forcePlaceholderSize: true, 
    handle: '.disclose', 
    helper: 'clone', 
    items: 'li', 
    opacity: .6, 
    placeholder: 'placeholder', 
    revert: 250, 
    tabSize: 25, 
    tolerance: 'pointer', 
    toleranceElement: '> div', 
    maxLevels: 4, 
    isTree: true, 
    expandOnHover: 700, 
    startCollapsed: true, 
    stop: function(e, ui) { 
        if (ui.item.hasClass('odd') || ui.item.hasClass('even')) { 
            var _this = $(ui.item); 
            var name_col = _this.find('.name_col') 
                .children('span'); 
            var name = name_col.text(); 
            var new_ele = $('<li></li>') 
                .addClass('mjs-nestedSortable-branch') 
                .addClass('mjs-nestedSortable-collapsed') 
                .append('<div></div>') 
                .append('<span class="disclose"><i class="fa fa-plus"></i></span>' + name); 
            ui.item.replaceWith(new_ele); 
        } 
    }, 
    connectWith: '#example_table', 
    receive: function( e, ui ) { 
    } 
}); 
 
$( '#example_table > tbody > tr').draggable({ 
    connectToNestedSortable: "#structure", 
    helper: function( event ) { 
        var _this = $(this); 
        var name_col = _this.find('.name_col') 
            .children('span'); 
        var name = name_col.text(); 
        var new_ele = $('<li></li>') 
            .addClass('mjs-nestedSortable-branch') 
            .addClass('mjs-nestedSortable-collapsed') 
            .append('<div></div>') 
            .append('<span><i class="fa fa-plus"></i></span>' + name); 
        return new_ele.clone(); 
    }, 
    revert: "invalid" 
});