Question

我需要能够将数据从Fancytree外部拖放到树中并保存。我有任何可用的droppable（行）的密钥和标题，但是如何将它添加到用户删除它的确切位置？

$("#tree").fancytree({
        rootVisible: false,
        checkbox: false,
        selectMode: 1,
        clickFolderMode: 4, 
        debugLevel: 0, 
        source: [
            {title: "Node 1"},
            {title: "Node 2", key: "id2"},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 2", folder: true}
        ],
        extensions: ["dnd"],
        dnd: {
            autoExpandMS: 400,
            focusOnClick: false,
            preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
            preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
            dragStart: function(node, data) {
                return true;
            },
            dragEnter: function(node, data) {
               return true;
            },
            dragDrop: function(node, data) {
                /** This function MUST be defined to enable dropping of items on
                 *  the tree.
                 */
                data.otherNode.moveTo(node, data.hitMode);
                /**/
                return false;
            }
        }
    });

    $( ".drag").draggable();

Answer 1

示例可能如下所示：

    var count = 1;
    $("#tree").fancytree({
        ...
        dnd: {
            ...
            dragDrop: function(node, data) {
                if( !data.otherNode ){
                    // It's a non-tree draggable
                    var title = $(data.draggable.element).text() + " (" + (count)++ + ")";
                    node.addNode({title: title}, data.hitMode);
                    return;
                }
                data.otherNode.moveTo(node, data.hitMode);
            }

Answer 2

解决方案包括jQueryUI draggable。感谢@ mar10的贡献，它指出了我正确的方向（现在让这个工作为Datatables）。 http://jsfiddle.net/nwntpd15/13/

$(".draggable").draggable({
  revert: true, //"invalid",
  cursorAt: { top: -5, left: -5 },
  connectToFancytree: true,   // let Fancytree accept drag events
});

将可拖动的数据/行放入Fancytree？

2 个答案: