html5 svg 拖拽,SVG拖动

通过点击并拖动它来移动屏幕上的元素的能力。 这在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 个群。