Jstree拖拽位置判断：如何识别拖拽在节点内、上方还是下方？

没问题，我来帮你搞定这个拖拽位置判断的需求！你已经走对了方向，其实Jstree的dnd_stop.vakata事件本身就封装了你需要的位置信息，不用自己去解析DOM节点的位置，直接用事件参数里的字段就可以了。

优化后的拖拽结束事件处理函数 #

你可以把eventDrop函数改成这样，直接获取拖拽节点ID、目标节点ID和位置：

const eventDrop = (data) => {
  // 获取被拖拽节点的ID（Jstree直接封装好了节点对象，比从data.data里取更可靠）
  const draggedNodeId = data.node.id;
  
  // 获取鼠标指向的目标节点（处理点击节点内图标/文本的情况，找到最外层的jstree节点）
  const targetNode = $(data.event.target).closest('.jstree-node');
  const targetNodeId = targetNode.attr('id');
  
  // 获取拖拽位置：直接返回inside/above/below三个值之一
  const dropPosition = data.position;

  // 这里可以根据位置写你的业务逻辑啦
  switch(dropPosition) {
    case 'inside':
      console.log(`节点 ${draggedNodeId} 被拖入 ${targetNodeId} 内部，将成为其子节点`);
      break;
    case 'above':
      console.log(`节点 ${draggedNodeId} 被放在 ${targetNodeId} 上方，将成为同级前置节点`);
      break;
    case 'below':
      console.log(`节点 ${draggedNodeId} 被放在 ${targetNodeId} 下方，将成为同级后置节点`);
      break;
    default:
      console.log('未识别的拖拽位置');
  }
};

关键说明 #

• 为什么不用data.data.nodes[0]？
  Jstree在dnd_stop事件里已经把拖拽的节点对象直接放到data.node里了，用data.node.id获取ID更直接、更可靠，避免DOM结构变化带来的问题。
• 目标节点的正确获取方式
  你之前用data.event.target.parentNode.id可能会拿到错误的节点（比如点击了节点内的图标，parentNode可能不是最外层的jstree节点），用closest('.jstree-node')可以精准定位到目标节点的最外层元素，确保拿到正确的ID。
• 位置参数data.position
  这个字段是Jstree内置的，拖拽结束时会自动返回inside（拖入节点内部）、above（放在节点上方）、below（放在节点下方）三个值中的一个，完全符合你的需求。

确保你的Jstree配置没问题 #

你当前的配置已经开启了check_callback: true和dnd插件，这两个是拖拽功能正常工作的必要条件，保持就好。

内容的提问来源于stack exchange，提问作者Tiago Camacho