JsPlumb 5.12拖拽组内子元素连接断裂及禁用拖拽问题咨询

一、解决拖拽子元素时连接断裂的问题 #

拖拽子元素导致连接断裂的核心原因是：默认配置下，子元素拖拽会脱离分组容器，JsPlumb无法再识别它与分组的关联关系，进而导致连接失效。要解决这个问题，需要让子元素在分组内拖拽时保持与分组的绑定，同时维持连接的关联。

具体方案 #

1. 限制子元素在分组内拖拽，并同步分组重绘
   给子元素设置拖拽范围为所属分组，同时在拖拽过程中触发分组重绘，确保JsPlumb始终识别子元素与分组的归属关系：

   // 初始化分组
   const group1 = jsPlumb.getGroup('group1-id');
   const group2 = jsPlumb.getGroup('group2-id');
   
   // 配置elem1的拖拽行为
   jsPlumb.draggable('elem1', {
     containment: 'group1-id', // 限制在分组容器内移动
     drag: () => {
       group1.repaint(); // 拖拽时重绘分组，更新关联关系
     }
   });
   
   // 配置elem2的拖拽行为
   jsPlumb.draggable('elem2', {
     containment: 'group2-id',
     drag: () => {
       group2.repaint();
     }
   });
   

2. 将子元素拖拽事件委托给分组容器
   初始化分组时，设置拖拽代理为分组容器，这样拖拽子元素时会触发分组的拖拽行为，子元素不会脱离分组：

   jsPlumb.addGroup({
     id: 'group1-id',
     el: 'group1-element',
     dragOptions: {
       delegate: 'group1-element', // 拖拽分组内任意区域都触发分组拖拽
       containment: 'parent' // 限制分组在父容器内移动
     },
     members: ['elem1']
   });
   
   jsPlumb.addGroup({
     id: 'group2-id',
     el: 'group2-element',
     dragOptions: {
       delegate: 'group2-element',
       containment: 'parent'
     },
     members: ['elem2']
   });
   

二、设置分组内子元素不可拖拽 #

有两种直接有效的方式：

1. 单独禁用子元素拖拽
   针对单个子元素调用禁用拖拽的方法：

   jsPlumb.setDraggable('elem1', false);
   jsPlumb.setDraggable('elem2', false);
   

2. 分组初始化时批量禁用成员拖拽
   在分组配置中设置成员的拖拽属性为false，一次性禁用分组内所有子元素的拖拽：

   jsPlumb.addGroup({
     id: 'group1-id',
     el: 'group1-element',
     members: ['elem1'],
     memberOptions: {
       draggable: false
     }
   });
   
   jsPlumb.addGroup({
     id: 'group2-id',
     el: 'group2-element',
     members: ['elem2'],
     memberOptions: {
       draggable: false
     }
   });
   

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