将表行放入 Fancytree？答案

【问题标题】：Drop table rows into Fancytree?将表行放入 Fancytree？
【发布时间】：2014-11-19 16:45:27
【问题描述】：

我之前有一篇类似的帖子，但从那以后我取得了更大的成功。在以下示例中，我的可拖动 div 已成功放入 Fancytree。现在知道这是可能的，我需要将 Datatable 行放入其中。

我最初在 DataTables 中使用 RowReordering 插件来实现拖放功能，直到我遇到了这个演示：http://www.mccran.co.uk/examples/datatables-drag-drop/，它在 tbody 上使用了 sortable。所以 Fancytree 可以接受外部丢弃，而 DataTable 可以丢弃在表格之外——现在让它们一起工作。

如果您移动表格行并将它们放到表格中（在演示中），可排序更新会正确发出警报。我还制作了一个替代的放置目标，有时可以与行放置一起使用。有任何想法吗？提前致谢

http://jsfiddle.net/s827x/43/

// make table rows draggable
    $("#pricetable tbody").sortable({
        cursor: "move",
        cursorAt: { top: -5, left: -5 },
        connectWith: "#tree", // not working
        connectToFancytree: true, // works for drag example below, but not here
        update: function(event, ui) {
            var id = ui.item.context.children[0].innerHTML;
            var title = ui.item.context.children[1].innerHTML;
            alert("Key: " +id + "\nTitle: " + title);
        }
    });

【问题讨论】：

标签： jquery jquery-ui draggable droppable fancytree

【解决方案1】：

用 draggable 解决了这个问题，而不是像上面的例子那样 sortable：

$('#pricetable').dataTable({
        "fnDrawCallback": function () {
            $("#pricetable tr").draggable({
                revert: true,
                cursor: "move",
                cursorAt: { top: -5, left: -5 },
                connectToFancytree: true
            });
        }
    });

http://jsfiddle.net/s827x/47/

【讨论】：