x6的框选和拖拽怎么同时实现

在X6中，框架支持图形节点的框选和拖拽功能，通常需要配合`graph.on('node-drag-start', ...)`、`graph.on('node-drag-end', ...)`等事件处理函数来实现在拖拽过程中保持节点的选择状态。以下是基本步骤：

1. **初始化事件监听**：

   const graph = new x6.Graph({
     container: 'container',
     autoLayout: true,
   });

   // 添加节点选择和拖拽事件处理
   graph.on('node-drag-start', (event) => {
     event.preventDefault(); // 阻止默认的浏览器行为
     event.graph.clearSelection(); // 清除原有选中
     event.nodes.forEach((node) => node.selected = true); // 选择开始拖动的节点
   });

   graph.on('node-drag-end', () => {
     event.graph.update(); // 更新视图反映新的节点位置
     // 根据需要更新数据模型或业务逻辑
   });

2. **响应事件**：
- `node-drag-start`: 当用户点击并开始拖动节点时触发，这里保存选中的节点并设置其为选中状态。
- `node-drag-end`: 当用户释放鼠标结束拖动时触发，此时可以更新节点位置，并处理数据同步。

需要注意的是，这只是一个基础示例，实际应用中可能还需要根据具体的业务需求进行调整，比如防止交叉选择、限制特定范围内的拖拽等。