如何区分 jstree drop 作为子级或兄弟级？答案

【问题标题】：How to differentiate a jstree drop as child or sibling?如何区分 jstree drop 作为子级或兄弟级？
【发布时间】：2015-04-03 12:26:07
【问题描述】：

我正在使用 jstree 拖放插件。

丢弃时，可以作为孩子或兄弟姐妹丢弃。不同之处在于下降之前显示的箭头。

此右箭头显示在目标节点旁边或目标节点上方。

有没有办法判断右箭头是在目标节点的旁边还是上面？

我可以使用 hover_node 事件捕获目标节点，但我不知道 drop 是作为子节点还是作为兄弟节点。

更新：我注意到当拖放操作发生时插入了两个新的 html 标签 - “vakata-dnd”和“jstree-marker”。这两个元素之间的最大差异似乎部分决定了被拖动的项目以后是子项还是兄弟项。然而，当包含节点的行悬停时，hover_node 只会触发一次。有没有办法捕捉到鼠标的每一个动作？

【问题讨论】：

标签： javascript jquery jstree

【解决方案1】：

使用 JSTree 的 check_callback 函数。它传递了这些论点 operation, node, parent, position, more 可用于获取您需要的信息。 position 返回一个数字，0 表示悬停，如果被丢弃将产生一个孩子，1 表示兄弟姐妹。以下是更多文档的链接：

http://www.jstree.com/api/#/?q=check_call&f=$.jstree.defaults.core.check_callback https://github.com/vakata/jstree#more-on-configuration

 $("#tree").jstree({
  "core" : {
    "check_callback" : function (operation, node, parent, position, more) {
      if(operation === "copy_node" || operation === "move_node") {
        if(parent.id === "#") {
          return false; // prevent moving a child above or below the root
        }
      },
      return true; // allow everything else
    }
  },
  "plugins" : ["dnd","contextmenu"]
});

为了更好地理解输出，将参数传递给控制台：

$("#tree").jstree({
  "core" : {
    "check_callback" : function (operation, node, parent, position, more) {
      console.log(operation, node, parent, position, more);
      },
      return true;
    }
  },
  "plugins" : ["dnd"]
});

【讨论】：

【解决方案2】：

对于其他仍在寻找的人，参考这篇 SO 帖子可能会有所帮助。

JsTree v3.0 drag and drop plugin. Reference target node upon dropping

另外，由于您询问如何检查鼠标的每次移动，请参阅check_while_dragging，它允许每次拖动鼠标位置发生变化时触发dnd_move 事件。

【讨论】：