html - Kinetic.js don't lose grip on mouse out

Question

When you drag an object and mouse is out of rendering area, dragging stops (firing an event) and user loses a grip.

It's extremelly inconvenient, taking into account that all other technologies (Flash, raw HTML5 Canvas, etc) allows to save the grip even if mouse is out.

Is there a way to solve the problem?

UPDATE: Up to the moment solved the problem by changing library file and binding listeners to the document, not to the container. I know that it's bad to hack into library files, but after inspecting the library's source code I haven't found out way around.

Answer 1

你可以检查元素是否看不见，如果是的话，把它带回来：

shape.on('dragend', function() {
 var pos = shape.getPosition();
 var layer = pos.getLayer();
 if (pos.y < 0) {
  pos.y = 0;
 }
 var maxY = layer.getHeight() - shape.getHeight();
 if (pos.y > maxY) {
  pos.y = maxY
 }
 shape.setPosition(pos);
}

Answer 2

看element.setCapture()。您可以从鼠标事件的事件处理程序中调用它，例如。mousedown：

function mouseDown(e) {
    e.target.setCapture();
    e.target.addEventListener("mousemove", mouseMoved, false);
}

尽管浏览器支持有点参差不齐（IE 和 Firefox 支持它，不确定其他浏览器），但对于跨浏览器使用，您将不得不退回到您已经遇到的文档方法的绑定。