Konva (react) - Group draggable and child drggable

Question

我想要一个可以拖动的组。在组内我有一个 child 也是可拖动的。

目前拖动群组功能正常。但有时当我开始拖动时 child 没有正确选择。当它确实开始拖动时，它有点滞后并且行为不正常。

   <Group
     ref={blockRef}
     draggable
     onDragmove={(e) => {
       if (forceDragStop) {
          e.target.stopDrag();
       }
     }}
   >

      <Rect
         x={12}
         y={0}
         height={32}
         width={6}
         draggable
         onDragStart={() => setForceDragStop(true)}
         onDragmove={(e) => {
            let pos = e.target.position();
         }}
      />


     // Some other components that drag with the group


   </Group>

如何正确解决这个问题？

我还尝试使另一个矩形（即组的主要形状）可拖动而不是组本身。但是当拖动它并更新组的位置时，会出现奇怪的行为。

我需要为此使用相对位置（我不能使用绝对位置）。

Answer 1

我通过将其添加到可拖动 child:

解决了这个问题

onMouseEnter = {e => {
    e.cancelBubble = true;
}}

Konva (react) - Group draggable and child drggable

Konva (react) - Group draggable and child drggable

konvajs

react-konva

konva