Question

我有一个可拖动的组，该组中的一个元素调用了click事件。现在我想删除该元素上的拖动事件。见http://jsfiddle.net/gLvyouct/1/

我尝试过这些方法：

添加circle.call(drag).on(".drag", null);

不工作，我不知道为什么。
仅在rects上调用拖动事件

会影响拖拽事件的流畅性。拖动时元素会发抖。
定义拖动行为if (d3.event.sourceEvent.target.nodeName == "circle") return;

不工作。当您的鼠标位于圆圈边缘时，该组仍会移动。

Answer 1

这是一个棘手的问题，因为如果您将拖动事件绑定到rect，然后移动矩形所属的g，则会计算dx和{{1}在每个事件触发后，dy对象中的值将被混乱，因为这些计算值已被转换为拖动行为所绑定的元素的局部坐标系。所以，我们可以自己做类似的事情来解决这个问题。这里的诀窍是知道我们真的只需要在拖动动作期间找出鼠标的d3.event和x位置的变化。并且d3使y对象的sourceEvent属性中可用。

因此，使用d3.event对象中的基础sourceEvent获取d3.event和clientX位置，然后计算最后一个值与当前值之间的差异，会告诉你clientY translate元素所需的额外费用。您还需要初始化您要比较的值，以便您在开始时不会获得随机跳转。幸运的是，我们可以使用g事件来做到这一点。

一旦我们发现了这一点，我们就可以将dragstart处理程序绑定到drag，我们应该很高兴。

这是一个正如我所描述的那样的例子。

＆＃13;

rect

＆＃13;

var g = d3.select("#mysvg").append("g");
var rect = g.append("rect").attr("height", 100).attr("width", 100);
var circle = g.append("circle").attr("cx", 200).attr("cy", 200).attr("r", 50).attr("fill", "black");
var transX = 0, transY = 0;
var lastX = 0, lastY = 0;

var drag = d3.behavior.drag().on("drag", function() {
    transX += d3.event.sourceEvent.clientX - lastX;
    transY += d3.event.sourceEvent.clientY - lastY;
    g.attr("transform", "translate(" + transX + "," + transY + ")");
    lastX = d3.event.sourceEvent.clientX;
    lastY = d3.event.sourceEvent.clientY;
}).on("dragstart", function() {
    lastX = d3.event.sourceEvent.clientX;
    lastY = d3.event.sourceEvent.clientY;
});
rect.call(drag);

circle.on("click", function() { 
    var now_color = d3.select(this).attr("fill");
    if (now_color == "black")
        d3.select(this).attr("fill", "green");
    else 
        d3.select(this).attr("fill", "black");
});

//circle.call(drag).on(".drag", null);

＆＃13;

如何在可拖动组中的一个元素上删除拖动事件？

1 个答案: