如何刪除可拖動組中一個元素上的拖動事件？

Question

我有一個可拖動的組，該組中的一個元素稱為點擊事件。 現在，我想刪除該元素上的拖動事件。 參見http://jsfiddle.net/gLvyouct/1/

我嘗試了以下方法：

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

  不工作，我不為什么。

• 僅在矩形上調用拖動事件

  將影響拖動事件的流暢性。 元素在拖動時會晃動。

• 在拖動行為的定義中， if (d3.event.sourceEvent.target.nodeName == "circle") return;

  不工作 當鼠標位於圓的邊緣時，該組仍會移動。

Answer 1

這是一個棘手的問題，因為如果將拖動事件綁定到rect ，然后移動rect所屬的g ，則在每次事件觸發后， d3.event對象中計算出的dx和dy值都會被弄亂，因為計算值已轉換為拖動行為綁定到的元素的局部坐標系。 因此，我們可以做類似的事情來解決此問題。 這里的技巧是知道我們真的只需要弄清楚拖動動作期間鼠標的x和y位置的變化。 d3使這些內容在d3.event對象的sourceEvent屬性中d3.event 。

因此，請使用d3.event對象中的基礎sourceEvent來獲取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>