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

Question

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

我曾尝试以下方法：

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

  不工作，我不知道为什么。

• 只有呼吁rects

  拖动事件是否会影响拖动事件的流畅性。元素在被拖动时发抖。

• 在拖拽动作定义if (d3.event.sourceEvent.target.nodeName == "circle") return;

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

Answer 1

这是一个棘手的，因为如果绑定拖动事件到rect然后移动g该RECT所属所示，在d3.event对象计算出的dx和dy值将每一后弄乱事件发生，因为这些计算值已经转化为拖拽行为所绑定的元素的本地坐标系统。所以，我们可以自己做一些类似的工作来解决这个问题。这里的诀窍是知道我们真的只需要在拖动动作期间找出鼠标位置x和y的变化。而且这个D3使得d3.event对象的sourceEvent属性可用。

所以使用底层sourceEvent在d3.event对象来获取clientX和clientY位置，才算最后的值和当前值，它会告诉你，你需要多远额外给translate的g元素之间的差异。您还需要初始化您正在比较的值，以免在开始时出现随机跳跃。幸运的是，我们可以使用dragstart事件来做到这一点。

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

下面是一个正在做我所描述的例子。

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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg id="mysvg" height="800" width="800"></svg>