如何将节点从一个组移动/拖动到另一个组？

要将节点从一个组移动/拖动到另一个组，您可以使用以下步骤和示例代码：

步骤 1：创建两个组 首先，您需要创建两个组。一个组将包含要移动/拖动的节点，另一个组将是节点的目标位置。

// 创建源组
var sourceGroup = new Konva.Group();

// 创建目标组
var targetGroup = new Konva.Group();

步骤 2：将节点添加到源组 将要移动/拖动的节点添加到源组中。

// 创建要移动的节点
var node = new Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  fill: 'red',
});

// 将节点添加到源组
sourceGroup.add(node);

步骤 3：监听节点的拖动事件 使用Konva的拖动事件监听器，将对节点的拖动操作与移动节点的逻辑进行关联。

node.on('dragmove', function (e) {
  // 获取节点的当前位置
  var pos = node.position();

  // 将节点从源组中移除
  sourceGroup.remove(node);

  // 将节点添加到目标组中
  targetGroup.add(node);

  // 设置节点的新位置
  node.position(pos);
});

完整示例代码：

// 创建舞台和画布
var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500,
});

var layer = new Konva.Layer();
stage.add(layer);

// 创建源组
var sourceGroup = new Konva.Group();

// 创建目标组
var targetGroup = new Konva.Group();

// 创建要移动的节点
var node = new Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  fill: 'red',
});

// 将节点添加到源组
sourceGroup.add(node);

// 将源组和目标组添加到图层
layer.add(sourceGroup);
layer.add(targetGroup);

// 监听节点的拖动事件
node.on('dragmove', function (e) {
  // 获取节点的当前位置
  var pos = node.position();

  // 将节点从源组中移除
  sourceGroup.remove(node);

  // 将节点添加到目标组中
  targetGroup.add(node);

  // 设置节点的新位置
  node.position(pos);
});

// 更新图层
layer.draw();

这样，当您拖动节点时，它将从源组中移动到目标组中。