How to drag and drop DOM image into the canvas

In this demo we will demonstrate how drop DOM element that is placed outside of canvas into the stage.

The first image you see is a DOM image. We can use HTML5 drag&drop to enable its dragging.

You will need some extra step if you need to enable drag&drop for DOM element on touch devices. You can read here for more info.

Instructions: drag&drop yoda into the canvas.

Konva Elastic Stars Demoview raw
<!DOCTYPE html>
<html>

<head>
<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Drop DOM element Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}

#container {
background-color: rgba(0, 0, 0, 0.1);
}

p {
margin: 4px;
}

#yoda {
width: 100px;
}
</style>
</head>

<body>
<p>
Drag&drop yoda into the grey area.
</p>
<img src="/assets/yoda.jpg" id="yoda" draggable="true" />
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;


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


var yoda = document.getElementById('yoda');


var con = stage.getContainer();
con.addEventListener('dragover', function (e) {
e.preventDefault(); // !important
});

stage.getContainer().addEventListener('drop', function (e) {
e.preventDefault();
// now we need to find pointer position
// we can't use stage.getPointerPosition() here, because that event
// is not registered by Konva.Stage
// we can register it manually (with private method):
stage._setPointerPosition(e);

// or we can calculate in manually from event properties

Konva.Image.fromURL("/assets/yoda.jpg", function (image) {
layer.add(image);

image.position(stage.getPointerPosition())
image.draggable(true);

layer.draw();
});
})

</script>

</body>

</html>
Next