CODEWITHSUNDEEP
drag-and-dropcloneshapeskonvajs
konvadev
konvadev

Reputation: 51

Konva drag drop without moving drag element

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

Upvotes: 5

Views: 3318

Answers (1)

lavrton
lavrton

Reputation: 20373

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

Upvotes: 7

Related Questions