这里(SVG draggable using JQuery and Jquery-svg,接受的答案)是实现拖放功能来移动圈子.它基于改变可移动圆对象的cx和cy属性.
如何拖放多边形？
我怎样才能使用没有cx,cy坐标的任何其他元素？
我应该重新计算所有对象点吗？
我希望有一种更简单的方法.我打算使用JavaScript jQuery
最佳答案
有一种简单的方法可以在不重新计算点的情况下完成.您只需使用属性转换来转换形状.假设你在你的svg中有任何形状(在我想要向你展示的情况下,我将使用一个形状元素),并且你只能在事件mousedown时移动该形状,然后触发mousemove,以及释放鼠标按钮时此操作结束.然后使用jQuery和svg标记作为选择器的过程如下：
$("svg").mousedown(function(e){
/* Getting initial coordinates of pointer */
var GetInitCoordx = e.clientX;
var GetInitCoordy = e.clientY;
/* When mouse is moved while down,then applies the transformation. */
$(this).bind("mousemove.customName",function(e){
$("svg").find("path").attr("transform","translate("+String(e.clientX-GetInitCoordx)+","+String(e.clientY-GetInitCoordy)+")");
});
/* When mouse button is released,move event is unbind */
$(this).mouseup(function(e){
$(this).unbind("mousemove.customName");
);}
});
基本的想法是.我已经使用这种方法设计了一个应用程序,它在Chrome,IE9和Opera中都适用于我.无论如何,如果我在代码中犯了错误,你可以自由地温暖我,但我想让你得到的是我使用的方法非常容易实现.
另外,请记住,您可以为svg元素设置唯一属性值,以便在使用jQuery选择器进行选择时进行识别.
