How to Drag and drop canvas shapes with vue-konva | Interchange locations of two shapes by drag and drop

 

Konva is a JavaScript library that supports animations, tweens, drawing many different shapes and designs, ready-to-use filters, node nesting, grouping, and bubbling on both desktop and mobile devices. It also supports native integration with web frameworks like React and Vue by exporting high-quality image data, image objects, and data URLs. In this blog, we will learn to draw different shapes using Konva and Nuxt.js and will make those shapes draggable and droppable.

Installing VueKonva with npm:

npm install vue-konva konva --save

Import and use VueKonva:

import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)

Create shapes with drag and drop:

In the example below I tried to create a few shapes using Vue-Konva on konva stage. So initially we need to define the main template that will contain all HTML elements including the Konva Stage container.

<template>
  <div>
    <button
        type="button"
        class="success"
        @click="saveFile"
      >
      Download File
      <i class="icon-arrow rotate-90"></i>
    </button>
    <button
      type="button"
      id="saveImage"
      class="info"
    >
      Download Image
      <i class="icon-arrow rotate-90"></i>
    </button>
    <button
      type="button"
      @click="resetTables"
      class="reset"
    >
      Reset Tables
      <i class="icon-arrow rotate-90"></i>
    </button>
    <div id="stage-parent">
      <div id="container">
      </div>
    </div>
  </div>
</template>

 

When the script runs it loads all the predefined shapes like squares, circles, lines, and ellipses. Then it creates a new stage and a layer object and then adds that layer to the stage. Now it draws various shapes to this layer. 

  // load previous data
   this.load()

   //create new stage
   var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });
    
    //create new layer
    var layer = new Konva.Layer();
    stage.add(layer);

    //draw defined elements
    Object.keys(this.elements).forEach(key => {
      layer.add(this.createShape(this.elements[key]));       
    });
    layer.draw();

Finally bind the prepared layer with dragend event assign this stage to the container '#stage-parent' specified in the template. 

Demo:

Interchange locations of two shapes :

Now if you want to interchange the locations of two shapes like when you drag and move the first shape over another shape and drop it there, the second shape will automatically move to the location of the first shape. So for this, you will need to find out the intersection point or we can say the collision point of both shapes. If both the shapes are intersecting each other then replace the coordinates of both shapes at the time of the drag end event.

Demo: