Konva drag drop without moving drag element

Question

My question is how to drag and drop a shape, but with cloning the draggable shape, and dragging that clone to the droppable shape.

I am new to Konva. While looking around the documentation & examples I could find how to drag and drop a shape.

I found reference to cloning of the shape, but I am not sure how to do this.

If someone could show me the way that would be very much appreciated.

Thank you

Cappello

Answer 1

rect.on('dragstart', function() {
    // stop dragging original rect
    rect.stopDrag();

    // clone it
    var clone = rect.clone({
        x : 50,
        y : 50
    });
    // events will also be cloned
    // so we need to disable dragstart
    clone.off('dragstart');

    // then add to layer and start dragging new shape
    layer.add(clone);
    clone.startDrag();
});

http://jsbin.com/hujulasaro/1/edit?html,js,output

for drop events see demo: http://konvajs.github.io/docs/drag_and_drop/Drop_Events.html

Franciscka

Thanks for the example. However, I am trying to do this with React using knova-react. I am trying to add to layer using ref but clone Rect is following scale of layer/stage. any quick example? – Stith

@EGL2-101 with the react-konva I think the approach should be very different. If you are going to write an app in "react-way" you will need to update the state of your app with the cloned information. – Franciscka

@Franciscka thanks for the reply. yes, I did it differently. Summarizing it here for someone using react-konva 1) I keep a hidden shape (Rect) with same attrs. 2) onDragStart (with Cmd key down) 2.1) save e.target.attrs 2.2) I make the hidden shape visible (don't do stopDrag()) 3) onDragEnd 3.1) use e.target.attrs to create new shape and push it to state. 3.2) use setAttrs() to move original shape back. – Stith