在konva中 一个组中我点击一次添加一个图片 图片不重叠 我要实现我移动组中的第一个图片 到组以外的背景图上 组里面的第二个图片移动到第一个图片的位置 第一个图片不删 以此类推

你可以尝试以下步骤实现这个功能：

1. 给组中的第一个图片绑定`dragmove`事件，当它移动时触发一个函数。
2. 在这个函数中，获取第一个图片的位置，并将它移动到背景图上。
3. 获取组中的第二个图片，并将它移动到第一个图片原来的位置。
4. 对于其它图片，依次重复这个过程。

以下是一个简单的示例代码，供你参考：

// 创建一个组
var group = new Konva.Group();

// 添加多个图片到组中
var image1 = new Konva.Image({ ... });
var image2 = new Konva.Image({ ... });
var image3 = new Konva.Image({ ... });

group.add(image1);
group.add(image2);
group.add(image3);
layer.add(group);

// 绑定dragmove事件
image1.on('dragmove', function() {
  // 获取第一个图片的位置
  var x = image1.x();
  var y = image1.y();

  // 将第一个图片移动到背景图上
  image1.moveTo(layer); // 移动到背景图层上
  image1.position({ x: x, y: y }); // 设置位置

  // 获取组中的第二个图片
  var image2 = group.getChildren()[1];

  // 将第二个图片移动到第一个图片原来的位置
  image2.position({ x: x, y: y });
});

// 对于其它图片，可以依次重复上述过程

注意，如果你需要对多个组都实现这样的交互，可以通过循环遍历的方式来处理每个组。此外，你可能还需要在移动图片时加上一些边界限制，避免图片移动到画布外。