fancytree drag n drop node恢复回原始位置

时间:2017-12-19 22:36:33

标签: javascript jquery html css fancytree

如何将fancytree中的节点拖动到树中的新位置后恢复到原来的位置,例如在将节点放到新位置后我会有一个确认对话框是或否移动如果用户说不回复对象,那么在下拉中需要移动到显示的新目的地,但也有确认并返回是或否。或者在拖动开始时获取位置并在拖动下降恢复到原始位置

$("#tree").fancytree({
extensions: ["dnd"],

// .. other options...

dnd: {
  autoExpandMS: 400,
  draggable: { // modify default jQuery draggable options
    zIndex: 1000,
    scroll: false,
    containment: "parent",
    revert: "invalid"
  },
  preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
  preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.

  dragStart: function(node, data) {
    // This function MUST be defined to enable dragging for the tree.
    // Return false to cancel dragging of node.
    //    if( data.originalEvent.shiftKey ) ...          
    //    if( node.isFolder() ) { return false; }
    return true;
  },
  dragEnter: function(node, data) {
    return true;
  },
  dragExpand: function(node, data) {
    // return false to prevent auto-expanding data.node on hover
  },
  dragOver: function(node, data) {
  },
  dragLeave: function(node, data) {
  },
  dragStop: function(node, data) {
  },
  dragDrop: function(node, data) {
    // revert node to back to it's original place
    data.otherNode.moveTo(node, data.hitMode);
  }
}

});

1 个答案:

答案 0 :(得分:1)

自从我在fancytree工作已经有一段时间了,所以我不知道完整的细节,但我想我可以提出一个可能有用的想法:

删除节点时,应该执行2个操作:

  • 在node.data中保留原始位置(node.data.prevParent = node.parent()或prevSibling,如果你想保持兄弟姐妹中的位置)
  • 使用您的2个选项触发对话框并传递节点参考

您的对话框基本上有两个选项:

  • 接受:删除node.data.prevParent并关闭对话框
  • 拒绝:检索node.data.prevParent并将节点移动为新的子节点/兄弟节点。之后关闭对话框

我希望这会有所帮助。万一你没找到它:这也有帮助:fancytree documentation

相关问题