从 jQuery DataTables 拖动到 jQuery nestedSortable

Question

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

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

我还想出了如何使用 custom helper 使占位符 出现 就好像它是一个 li 对象，但我不知道如何让 drop 对象成为等于助手，而不是原始表行。我尝试过在 .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...

Answer 1

好的，所以玩弄其他第一个 SO 问题I linked to，问题是我试图克隆 ui.helper 对象，假设它仍然存在（因为可拖动的助手正在工作）。但是，nestedSortable ui.helper 对象似乎为空（并且不像我想的那样自动等于可拖动的 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"
});