如何使用"Konva.JS“在两列之间拖放项目？

<script src="https://cdn.jsdelivr.net/npm/konva@latest/konva.min.js"></script>

var leftStage = new Konva.Stage({
  container: 'left-column',
  width: 200,
  height: 400
});

var rightStage = new Konva.Stage({
  container: 'right-column',
  width: 200,
  height: 400
});

var leftLayer = new Konva.Layer();
leftStage.add(leftLayer);

var rightLayer = new Konva.Layer();
rightStage.add(rightLayer);

var project1 = new Konva.Rect({
  x: 20,
  y: 20,
  width: 160,
  height: 60,
  fill: 'blue',
  draggable: true // 允许项目可拖动
});

project1.name('Project 1'); // 为项目设置名称属性

leftLayer.add(project1); // 将项目添加到左侧列的图层中
leftLayer.draw(); // 刷新左侧列的图层

project1.on('dragmove', function() {
  // 当项目被拖动时，更新其位置
  var newPosition = project1.position();
  project1.position({
    x: newPosition.x,
    y: newPosition.y
  });
  leftLayer.batchDraw(); // 刷新左侧列的图层
});

leftLayer.on('dragstart', function(e) {
  var target = e.target;
  target.moveTo(rightLayer); // 将拖动的项目移动到右侧列的图层中
  rightLayer.draw(); // 刷新右侧列的图层
});

rightLayer.on('dragstart', function(e) {
  var target = e.target;
  target.moveTo(leftLayer); // 将拖动的项目移动到左侧列的图层中
  leftLayer.draw(); // 刷新左侧列的图层
});