jquery - 从jQuery数据表拖动到jQuery nestedSortable

我试图在jQuery DataTable和jQuery nestedSortable之间拖动。问题是，当我拖放可拖动对象(从DataTable中)时，它还原为表行，而不是li对象(以适合nestedSortable)。 jsFiddle示例是here。我理想的情况是像jQuery UI example这样，但源是数据表，目标是nestedSortable ...

我发现此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(并且不像我想的那样自动等于可拖动的ui.helper对象)，因此我不得不在stop方法中重建该辅助对象。我的最终代码如下所示(需要清理冗余)，并在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"
});