// Create Konva Stage and Layer

      var stage = new Konva.Stage({

        container: "konvaContainer",

        width: 500,

        height: 500,

      });

​

      var layer = new Konva.Layer();

      stage.add(layer);

​

      // Create a rectangle

      var rect = new Konva.Rect({

        x: 50,

        y: 50,

        width: 100,

        height: 100,

        fill: "green",

        draggable: true,

      });

​

      layer.add(rect);

      layer.draw();

​

      // Handle drag events

      document

        .getElementById("draggableDiv")

        .addEventListener("dragstart", function (e) {

          e.dataTransfer.setData("text/plain", "dragging");

        });

​

      stage.container().addEventListener("dragover", function (e) {

        e.preventDefault(); // Necessary for the drop event to work

      });

​

      stage.container().addEventListener("drop", function (e) {

        e.preventDefault();

        stage.setPointersPositions(e);

​

        var pos = stage.getPointerPosition();

        rect.position({

          x: pos.x - rect.width() / 2,

          y: pos.y - rect.height() / 2,

        });

        layer.draw();

      });