Question

我试图在jQuery DataTable和jQuery nestedSortable之间拖动。问题是，当我删除我的可拖动对象（从DataTable）时，它将恢复为表行，而不是li对象（以适应nestedSortable）。一个例子jsFiddle是here。我的理想情况就像这个jQuery UI example，但是源是一个数据表而目标是一个nestedSortable ......

我发现这个fix通过为draggable插件创建我自己的“connectWith”选项来连接这两个元素，所以我可以从表中删除到可排序的。

我还想出了如何使用custom helper使占位符显示就好像它是一个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);
    }
});

更新

我知道有很多关于如何在jQuery中更改draggable对象的线程，所以只是记录一些我尝试过的东西（没有用）：

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（这会留下重影，但它确实会丢掉看起来像李的东西......可能是正确的方向）：

$('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对象是null（并且不会像我想象的那样自动等于可拖动的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"
});

从jQuery DataTables拖动到jQuery nestedSortable

更新

1 个答案: