通過點擊并拖動它來移動屏幕上的元素的能力。 這在SVG中可以比較容易實現，如下所示。

實現代碼如下所示 -

xmlns="http://www.w3.org/1999/xhtml">

var startX = 100;

var startY = 100;

function init() {

Snap("#button").click(resetFcn);

Snap("#buttonText").click(resetFcn);

Snap("#circle").drag(dragMove, dragStart, dragEnd);

}

function resetFcn(evt) {

Snap("#circle").attr({cx: 100, cy: 100});

}

function dragStart(x, y, evt) {

// figure out where the circle currently is

startX = parseInt(Snap("#circle").attr("cx"), 10);

startY = parseInt(Snap("#circle").attr("cy"), 10);

}

function dragMove(dx, dy, x, y, evt) {

Snap("#circle").attr({cx: (startX + dx), cy: (startY + dy)});

}

function dragEnd(evt) {

// no action required

}

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

style="fill:#663399; stroke: black"/>

rx="5" ry="5" width="50" height="25"

style="stroke:black; fill:#ddd; cursor:pointer"/>

style="fill:black; stroke:none;

font-family: sans-serif; font-size: 12pt;

text-anchor:middle; cursor:pointer">Reset

￥ 我要打賞

糾錯/補充

收藏

加QQ群啦，易百教程官方技術學習群

注意：建議每個人選自己的技術方向加群，同一個QQ最多限加 3 個群。

總結

以上是生活随笔為你收集整理的html5 svg 拖拽,SVG拖动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。