如何在JointJS中锁定单个嵌入元素，禁止移动且保留链接创建功能？

我明白你想要实现的效果：让嵌入在父元素里的子元素无法被拖动，但还能正常从这些子元素创建链接。之前的两种尝试都有问题，我来给你说下正确的实现方式～

问题分析 #

• 你第一次尝试在pointerdown事件里设置locked属性，其实JointJS并没有内置这个属性来控制拖动，所以这种方式不会生效。
• 第二次直接返回false禁用所有交互，确实能阻止拖动，但也把链接创建需要的交互一起禁用了，这显然不是你想要的。

正确方案：精确控制交互权限 #

JointJS的interactive选项支持返回一个配置对象，而不只是布尔值，这样我们就能精准控制哪些交互允许、哪些禁用。具体来说，我们需要给子元素设置draggable: false（禁止拖动），同时保留connectable: true（允许链接创建）。

代码示例如下：

this.paper = new joint.dia.Paper({
  // 你的其他配置项（比如width、height、model等）
  interactive: function(cellView) {
    // 判断当前元素是否是有父元素的子元素
    if (cellView.model.isElement() && cellView.model.parent()) {
      // 禁止拖动，但允许作为链接的源/目标
      return {
        draggable: false,
        connectable: true,
        magnet: true // 保持磁吸功能，确保链接能正常吸附
      };
    }
    // 非子元素保持默认的全部交互权限
    return true;
  }
});

为什么这个方案有效？ #

• draggable: false直接阻止了子元素的拖动行为，完全符合你锁定移动的需求。
• connectable: true和magnet: true确保了子元素依然可以作为链接的起点或终点，不会影响你创建链接的操作。
• 这种方式是JointJS官方推荐的细粒度交互控制方式，比事件拦截更优雅，也更不容易出现冲突。

额外补充：动态修改的情况 #

如果你的子元素是动态添加的，或者需要在运行时切换锁定状态，也可以通过修改元素的interactive属性来实现：

// 假设你有一个子元素model
subElementModel.set('interactive', {
  draggable: false,
  connectable: true,
  magnet: true
});

这样就能灵活控制单个元素的交互权限啦～

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