在konvajs中拖动选定的不在组中的元素

// 创建Stage对象
var stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

// 创建Layer对象
var layer = new Konva.Layer();

// 创建需要拖动的元素
var rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 50,
  fill: 'red',
  draggable: true  // 设置元素可拖动
});

// 将元素添加到Layer中
layer.add(rect);

// 将Layer添加到Stage中
stage.add(layer);

// 监听鼠标事件
rect.on('mousedown', function(e) {
  // 记录鼠标按下时的坐标
  var startPos = stage.getPointerPosition();

  // 判断当前鼠标是否在需要拖动的元素上
  if (e.target === rect) {
    rect.startDragPos = startPos;
  }
});

rect.on('mousemove', function(e) {
  // 判断是否正在拖动
  if (rect.startDragPos) {
    // 计算鼠标移动的距离
    var newPos = stage.getPointerPosition();
    var dx = newPos.x - rect.startDragPos.x;
    var dy = newPos.y - rect.startDragPos.y;

    // 更新元素的位置
    rect.x(rect.x() + dx);
    rect.y(rect.y() + dy);

    // 更新鼠标按下时的坐标
    rect.startDragPos = newPos;
  }
});

rect.on('mouseup', function() {
  // 停止拖动
  rect.startDragPos = null;
});

// 更新Stage
stage.draw();