HTML5 Canvas Drop Events

获取Konva最新的信息

Konva 不支持 drop 事件,但是你可以编写自己释放事件。

监听释放事件的对时,你需要先将拖动的对象移动到其它的图层。

下面的例子展示了 drop, dragenter, dragleave, dragover 等事件的实现。

说明:尝试拖动一个图形到另外一个上面然后释放。

Konva Drop Events Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drop Events Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<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 tempLayer = new Konva.Layer();
stage.add(tempLayer);

var text = new Konva.Text({
fill: 'black'
});
layer.add(text);

var star;
for (var i = 0; i < 10; i++) {
star = new Konva.Star({
x: stage.width() * Math.random(),
y: stage.height() * Math.random(),
fill: 'blue',
numPoints: 10,
innerRadius: 20,
outerRadius: 25,
draggable: true,
name: 'star ' + i,
shadowOffsetX: 5,
shadowOffsetY: 5
});
layer.add(star);
}
layer.draw();

stage.on('dragstart', function(e) {
e.target.moveTo(tempLayer);
text.text('Moving ' + e.target.name());
layer.draw();
});

var previousShape;
stage.on('dragmove', function(evt) {
var pos = stage.getPointerPosition();
var shape = layer.getIntersection(pos);
if (previousShape && shape) {
if (previousShape !== shape) {
// leave from old targer
previousShape.fire(
'dragleave',
{
type: 'dragleave',
target: previousShape,
evt: evt.evt
},
true
);

// enter new targer
shape.fire(
'dragenter',
{
type: 'dragenter',
target: shape,
evt: evt.evt
},
true
);
previousShape = shape;
} else {
previousShape.fire(
'dragover',
{
type: 'dragover',
target: previousShape,
evt: evt.evt
},
true
);
}
} else if (!previousShape && shape) {
previousShape = shape;
shape.fire(
'dragenter',
{
type: 'dragenter',
target: shape,
evt: evt.evt
},
true
);
} else if (previousShape && !shape) {
previousShape.fire(
'dragleave',
{
type: 'dragleave',
target: previousShape,
evt: evt.evt
},
true
);
previousShape = undefined;
}
});
stage.on('dragend', function(e) {
var pos = stage.getPointerPosition();
var shape = layer.getIntersection(pos);
if (shape) {
previousShape.fire(
'drop',
{
type: 'drop',
target: previousShape,
evt: e.evt
},
true
);
}
previousShape = undefined;
e.target.moveTo(layer);
layer.draw();
tempLayer.draw();
});

stage.on('dragenter', function(e) {
e.target.fill('green');
text.text('dragenter ' + e.target.name());
layer.draw();
});

stage.on('dragleave', function(e) {
e.target.fill('blue');
text.text('dragleave ' + e.target.name());
layer.draw();
});

stage.on('dragover', function(e) {
text.text('dragover ' + e.target.name());
layer.draw();
});

stage.on('drop', function(e) {
e.target.fill('red');
text.text('drop ' + e.target.name());
layer.draw();
});
</script>
</body>
</html>