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

Question

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

我尝试过以下方法:

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

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

• 仅在矩形上调用拖动事件

  会影响拖动事件的流畅度。元素在拖动时会晃动。

• 在拖动行为的定义中if (d3.event.sourceEvent.target.nodeName == "circle") return;

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

Answer 1

这是一个棘手的问题，因为如果将拖动事件绑定(bind)到rect，然后移动该矩形所属的g，则计算出的dx每次事件触发后，d3.event 对象中的 和 dy 值将变得困惑，因为这些计算值已转换为本地坐标系拖动行为绑定(bind)到的元素的名称。因此，我们可以自己做一些类似的事情来解决这个问题。这里的技巧是知道我们实际上只需要计算出拖动操作期间鼠标的 x 和 y 位置的变化。 d3 使这些在 d3.event 对象的 sourceEvent 属性中可用。

因此，请使用 d3.event 对象中的底层 sourceEvent 来获取 clientX 和 clientY 位置并只需计算最后一个值与当前值之间的差值，这将告诉您需要将 g 元素翻译多远。您还需要初始化要比较的值，以便在一开始就不会随机跳跃。幸运的是，我们可以使用 dragstart 事件来做到这一点。

一旦我们弄清楚了这一点，我们就可以将 drag 处理程序绑定(bind)到 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>