花式树拖放节点恢复到原始位置答案

【问题标题】：fancytree drag n drop node revert back to original position花式树拖放节点恢复到原始位置
【发布时间】：2017-12-21 22:18:53
【问题描述】：

你如何让花式树中的节点在被拖到树中的新位置后恢复到原来的位置，例如在将节点放到新位置后，我会有一个确认对话框是或否来移动对象，如果用户说不，它会恢复，因此在下降中需要移动到显示的新目的地，但也要确认并恢复是或否。或者在拖动开始时获取位置并在拖放时恢复到原始位置

$("#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);
  }
}

});

【问题讨论】：

标签： javascript jquery html css fancytree

【解决方案1】：

我在fancytree工作已经有一段时间了，所以我不知道全部细节，但我想我可以想出一个可行的想法：

删除节点时，您应该执行 2 个操作：

保留您在 node.data 中的原始位置（node.data.prevParent = node.parent() 或 prevSibling，如果您想保留兄弟姐妹中的位置）
使用 2 个选项启动对话框并传递节点引用

您的对话框基本上有 2 个选项：

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

我希望这会有所帮助。以防万一您还没有找到它：这也有帮助：fancytree documentation

【讨论】：