5

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

我通过为可拖动插件创建自己的“connectWith”选项找到了此修复程序来连接两个元素，因此我可以从表中拖放到可排序中。

我还想出了如何使用自定义助手使占位符看起来好像是一个 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 中更改可拖动对象的线程，所以只是为了记录一些我尝试过的东西（没有奏效）：

附加到可排序的停止方法，并带有一个标记已删除项目的自定义类。

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...
4

1 回答 1

2

好的，所以玩我链接到的第一个其他 SO 问题，问题是我试图克隆 ui.helper 对象，假设它仍然存在（因为可拖动的助手正在工作）。但是，nestedSortable ui.helper 对象似乎为空（并且不像我想的那样自动等于可拖动的 ui.helper 对象），所以我不得不在 stop 方法中重建辅助对象。我的最终代码如下所示（需要清理冗余），并在此处的 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"
});
于 2013-12-27T15:05:45.290 回答