CODEWITHSUNDEEP
konvajsreact-konvakonva
Jellohouse
Jellohouse

Reputation: 325

Konva (react) - Group draggable and child drggable

I want to have a group which is draggable. Inside the group I have a child which is also draggable.

Currently dragging the group works properly. But sometimes the child is not selected properly when I start drag. And when it does start dragging, it sort of lags and does not behave properly.

   <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>

How can I properly solve this?

I also tried making another of the rectangles (that is the main shape of the group) draggable instead of the group itself. But then when dragging this and updating the position of the group there is weird behavior.

I need to use relative positions for this (I can't use absolute positions).

Upvotes: 1

Views: 1019

Answers (1)

Jellohouse
Jellohouse

Reputation: 325

I solved it by adding this to the draggable child:

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

Upvotes: 1

Related Questions