连接完成后就停止拖动

Question

我正在使用React-Konva库使用我的调色板创建形状。然后，我将其拖动以进行连接。但是，一旦连接，它应该只能拖到组中，而不能仅用于每个项目。

我在const全局变量中放入了不同的形状。

const shapes=
<Group
draggable
>

<Shape
   sceneFunc={(context, shape) => {
   context.beginPath();
   context.moveTo(300, 100);
   context.lineTo(300, 100);
   context.quadraticCurveTo(150, 100, 100, 100);
   context.closePath();
   context.fillStrokeShape(shape);
   }}

   fill="#eff0f1"
   stroke="#222"

   />
   <Circle 

    x={305}
    y={100} 
    radius={10} 
    fill="#eff0f1" 
    stroke="#222"

    />
</Group>

const block=<Rect
x={2}
y={170}
width={100}
height={100}
draggable
fill="#eff0f1"
stroke="#222"
/>

现在，一旦我检查了调色板按钮，便将变量推入了数组中，但是一旦形状变量的连接器接触了reactangle，则应将其作为单个元素或分组进行连接

      <Stage width={950} height={585}>
                 <Layer>
                  <Group draggable>
                 {connector && multiConnector.map(shape=>{
                     return shape;
                 })}
                 {rect && multiBlock.map(block=>{
                     return block;
                 })}
                 </Group>
                 </Layer>
               </Stage>



constructor(){
        super();
        this.state={
            connector:false,
            rect:false,
            multiBlock:[],
            multiConnector:[]
        }

    }

    showConnector=() =>{
        const { multiConnector } = this.state;
        multiConnector.push(shapes);       
        this.setState({connector:true, multiConnector:multiConnector});
    }

    showRect=()=>{
        const { multiBlock } = this.state;
        multiBlock.push(block);
        this.setState({rect:true, multiBlock:multiBlock});
    }

1. 首先，连接器意味着形状不应穿过矩形或不能进入矩形边界。
2. 连接后，单个形状或矩形不应像组一样集体移动