jsfiddle 示例 http://jsfiddle.net/typeofgraphic/Ne8h2/4。我从另一个用户那里分叉了一个拖动示例,并在代码中添加了工作边界。单击以创建一个圆圈,然后将其拖动到蓝色框上以查看其工作情况。
这里的概念是观察 x 和 y 坐标d3.event
当拖动对象时,然后通过如下所示的两种方式之一触发“停止”事件。缺点是,在拖动事件接收到 mouseUp 之前,当鼠标仍被按住时,它会抛出错误。
// Define drag beavior
var drag = d3.behavior.drag()
.on("drag", dragmove);
function dragmove(d) {
// if the event.x goes over a boundry, trigger "dragend"
if(d3.event.x > 200){
// using D3
drag.dragend();
// or using jquery
drag.trigger("dragend");
}
var x = d3.event.x;
var y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}
这里的边界基于一个变量 - x 位置,但可以扩展到基于形状的表面积。
Drag 被用作此事件的命名空间,D3 为该事件创建了一个调度程序对象(请参阅 D3 库代码)。可以通过调用事件名称来访问(例如)
drag.on("eventName", functionToDo)
drag.eventName();
或者如果你想使用JQuery
然后可以使用以下方法应用触发器:
drag.trigger("dragend")
将鼠标悬停事件附加到“边界框”不起作用,因为拖动的对象将位于鼠标和框之间。也许那里也有一个解决方法。我添加了另一个较小的红色框(打开控制台可以看到这个not在职的)。
sources:
https://github.com/mbostock/d3/wiki/Drag-Behavior https://github.com/mbostock/d3/wiki/Drag-Behavior
https://github.com/mbostock/d3/wiki/Internals#dispatch_on https://github.com/mbostock/d3/wiki/Internals#dispatch_on
http://api.jquery.com/trigger/ http://api.jquery.com/trigger/