从jQuery DataTables拖动到jQuery nestedSortable

Question

我试图在jQuery DataTable和jQuery nestedSortable之间拖动.问题是,当我删除我的可拖动对象(来自DataTable)时,它将恢复为表行,而不是li对象(以适应nestedSortable).一个例子是的jsfiddle 这里.我的理想情况就像这个jQuery UI示例,但源是一个数据表,目标是一个nestedSortable ......

我发现这个修复程序通过为draggable插件创建我自己的"connectWith"选项来连接这两个元素,所以我可以从表中删除到sortable.

我还想出了如何使用自定义帮助器使占位符看起来像是一个li对象,但我无法弄清楚如何让drop对象等于助手,而不是原始的表行.我曾尝试在.draggable(stop),.fromsSortable(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);
    }
});

---

UPDATE

我知道有很多关于如何在jQuery中更改draggable对象的线程,所以只记录我尝试过的一些(没有用):

附加到可排序的停止方法,使用标记已删除项目的自定义类.

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);
    }
},

使用可排序的更新事件:

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

同时使用droppable和nestedSortable(这会留下重影,但它确实会丢弃看起来像li ...可能正确的方向):

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

Answer 1

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

$('#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"
});