如何实现jstree拖拽（dnd）限制：禁止人物节点间拖拽

嗨，这个需求很好实现，咱们可以利用jstree核心的check_callback回调函数来精准管控拖拽的允许范围。核心思路是：只允许将人物节点拖拽到城市类型的节点下，拒绝拖拽到其他人物节点上。

实现步骤与代码片段 #

首先，咱们需要给不同类型的节点标记明确的类型（比如城市节点type: "city"，人物节点type: "person"），然后在拖拽检查的回调里做判断：

$('#your-tree-id').jstree({
  core: {
    check_callback: function(operation, node, parent, position, more) {
      // 只处理移动节点的操作
      if (operation === "move_node") {
        // 首先判断当前被拖拽的节点是人物节点（避免误操作城市节点）
        if (node.type === "person") {
          // 目标节点如果是人物节点，直接禁止拖拽
          if (parent.type === "person") {
            return false;
          }
          // 目标节点是城市节点，允许拖拽
          if (parent.type === "city") {
            return true;
          }
        }
        // 如果是城市节点的移动，这里可以根据需求自行调整（比如禁止移动城市节点）
        // return false;
      }
      // 其他操作（比如创建节点等）默认允许，或者根据需求修改
      return true;
    },
    // 你的数据源配置，注意给节点加上type属性
    data: [
      {
        text: "Cities",
        children: [
          {
            text: "London",
            type: "city",
            children: [
              { text: "Paul", type: "person" },
              { text: "Jack", type: "person" }
            ]
          },
          {
            text: "New York",
            type: "city",
            children: [
              { text: "Lisa", type: "person" },
              { text: "Fred", type: "person" }
            ]
          }
        ]
      }
    ]
  },
  // 定义节点类型（可选，但能让配置更清晰）
  types: {
    city: {
      icon: "fa fa-building" // 可选，给城市节点加个图标区分
    },
    person: {
      icon: "fa fa-user" // 可选，给人物节点加个图标区分
    }
  },
  plugins: ["dnd", "types"] // 别忘了引入dnd和types插件
});

代码解释 #

1. 节点类型标记：在数据源里给每个节点加上type属性，明确区分城市和人物节点，方便后续判断。
2. check_callback回调：这是jstree用来判断各种操作是否允许的核心钩子，我们只关注move_node（移动节点）操作。
3. 拖拽逻辑判断：
   • 先确认被拖拽的是人物节点（避免误处理城市节点的移动）；
   • 如果目标节点是人物类型，返回false直接禁止拖拽；
   • 如果目标节点是城市类型，返回true允许拖拽。
4. 插件依赖：必须引入dnd（拖拽功能）和types（节点类型管理）插件，否则功能不生效。

这样配置后，人物节点就只能被拖到城市节点下，拖到其他人物节点上的时候会被直接禁止，完全符合你的业务需求~

内容的提问来源于stack exchange，提问作者W.Hipp