避免跳躍的同時拖動

下面是一個SVG的文本與錨：避免跳躍的同時拖動

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:200px;height:200px;"> 
    <text x="50" y="30" fill="red" text-anchor="start">I love SVG</text> 
</svg>

現在，如果我寫的一個拖累功能：

var dragMove = function (d,i) { 
    //d3.select(this).attr("text-anchor", "null"); Does not work 
    d3.select(this).attr("x", d3.event.x) 
       .attr("y", d3.event.y); 
}; 

var dragEnd = function (d,i) { 
    //d3.select(this).attr("text-anchor", "start"); Does not work 
}; 

var drag = d3.behavior.drag() 
       .on("drag", dragMove) 
       .on("dragend", dragEnd); 

d3.select("svg") 
    .select("text") 
    .call(drag);

它跳躍之後你根據其錨點位置拖動它。有針對這個的解決方法嗎？

我嘗試將anchor-text設置爲null，然後重新設置它，但這不起作用。我不希望拖動的用戶體驗改變。即使拖動結束。

有什麼想法？

這裏是的jsfiddle：http://jsfiddle.net/sewVr/

來源

2013-10-08 FidEliO

我不認爲這是可能的，但你可以使用jQuery。查看offsetX和offsetY屬性 – 0xcaff

http://www.html5rocks.com/en/tutorials/dnd/basics/您可以嘗試使用本地拖放api的 – 0xcaff

可以通過保存多少人的x和y當鼠標點擊事件發生的地點和text元素的原點之間的偏移做到這一點。像這裏：http://jsfiddle.net/twKD9/

來源

2013-10-08 15:02:27

當涉及到viewBox屬性時，您的方法也可以正常工作。 – FidEliO

使用d3.event.dx和d3.event.dy得到相對的阻力位置變化，並在您dragMove()功能應用它。

演示在這裏：http://jsfiddle.net/sewVr/1/

來源

2013-10-08 14:21:02

這是比我的答案更一般的方法。 –

當啓用視圖框屬性時，這不起作用。有沒有辦法解決這個問題？ – FidEliO

這使得它有點棘手。這應該是可能的，但是您需要使用從getCTM（）（SVG DOM函數）返回的矩陣縮放dx和dy。請參閱http://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable。 d3也可能有內置功能來幫助解決這個問題，但我對d3不夠熟悉，無法給出明確的答案。 –

避免跳躍的同時拖動

回答

相關問題