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 个群。

html5 svg 拖拽,SVG拖动相关推荐

html5限制拖拽区域怎么实现,html5怎么实现拖拽
html5实现拖拽的方法:首先新建一个空的HTML5结构:然后在body元素中放置一个div:最后通过allowDrop,drag和drop三个函数实现拖拽功能即可. 本文操作环境:Windows7系 ...
RecyclerView实现Item可拖拽（拖动、删除）
RecyclerView实现Item可拖拽(拖动.删除) 话不多说,先附上效果图: ItemTouchHelper 这是一个RecyclerView的工具,提供了drag & swipe 的功 ...
HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...
HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...
使用cloneNode函数复制节点元素--svg拖拽复制
目录需求导致问题寻求解决的过程解决方案 function selectElement(event){// if(event.button==0){console.log("selec ...
HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
HTML5原生拖拽/拖放(drag drop)详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
[开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
html5 list 拖拽排序,vue实现可拖拽排序的列表
在做友情链接管理功能的时候,考虑到有个对友情链接排序的需求,开始的时候我是在这个list 里边加了rank字段,用户需要手动输入rank ,点击保存后,后台通过用户输入的rank序号进行排序,这显然 ...

html5 svg 拖拽,SVG拖动

html5 svg 拖拽,SVG拖动相关推荐

最新文章

热门文章