HTML5 Canvas Drag and Drop Events

Get last news, demos, posts from Konva

To detect drag and drop events with Konva, we can use the on() method to
bind dragstart, dragmove, or dragend events to a node.
The on() method requires an event type and a function to be executed when the event occurs.

Konva Drag Events Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag Events Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function writeMessage(message) {
text.text(message);
layer.draw();
}
var width = window.innerWidth;
var height = window.innerHeight;

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

var layer = new Konva.Layer();

var text = new Konva.Text({
x: 10,
y: 10,
fontFamily: 'Calibri',
fontSize: 24,
text: '',
fill: 'black'
});

var box = new Konva.Rect({
x: 20,
y: 100,
offset: [50, 25],
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});

// write out drag and drop events
box.on('dragstart', function() {
writeMessage('dragstart');
});
box.on('dragend', function() {
writeMessage('dragend');
});

layer.add(text);
layer.add(box);

// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>