HTML5 Canvas Drag and Drop a Group Tutorial

Get last news, demos, posts from Konva

To drag and drop groups with Konva, we can set the draggable property
of the config object to true when the group is instantiated, or we can use the draggable() method.

Konva Drag and Drop the Group Demoview raw
<!DOCTYPE html>
<script src="[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag and Drop a Group Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
<div id="container"></div>
var width = window.innerWidth;
var height = window.innerHeight;

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

var shapesLayer = new Konva.Layer();
var group = new Konva.Group({
draggable: true
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];

for (var i = 0; i < 6; i++) {
var box = new Konva.Rect({
x: i * 30 + 10,
y: i * 18 + 40,
width: 100,
height: 50,
name: colors[i],
fill: colors[i],
stroke: 'black',
strokeWidth: 4

group.on('mouseover', function() { = 'pointer';
group.on('mouseout', function() { = 'default';