有没有一种方法可以在svg的任何位置单击,并使元素定位到该位置并同时开始拖动?
我已经接近实现了下面的代码。拖动圆形是有效的,而单击其他位置会使圆形移动到那个位置,但我无法想出如何在不释放鼠标并直接单击圆形的情况下开始拖动。
更一般地说,如何在不直接与要拖动的元素交互的情况下开始拖动行为?
var width = 200,
height = 200,
radius = 10;
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", function(){
d3.event.sourceEvent.stopPropagation()
})
.on("drag", dragmove);
var svg = d3.select("body")
.data([{x: 100, y : 100}])
.append('svg')
.attr("height", 200)
.attr("widht", 200)
.on("mousedown", function(){
circle.each(dragmove)
});
var circle = svg.append("circle")
.attr("r", radius)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);
function dragmove(d) {
d3.select(this)
.attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
.attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
}