| svg中实现元素拖动 | 您所在的位置：网站首页 › 什么是拖动点击 › svg中实现元素拖动 |
|
svg中实现元素拖动 目录 html 属性 初始化: mousedown mousemove: mouseup: html 属性没有设置初始值... var originX = 0; // 鼠标初始位置 var originY = 0; var domX = 0; // dom初始元素 var domY = 0; var dom; // 初始元素 var isMouseDown = false; 初始化: window.onload = function () { dom = document.getElementById("firstRect"); // 设置dom初始属性 } mousedown function mousedown(e) { // 鼠标初始位置 originX = e.clientX; // 初始位置 originY = e.clientY; // 元素初始位置 domX = dom.getAttribute("x"); domY = dom.getAttribute("y"); domX.replace("px", ""); domY.replace("px", ""); domX = parseInt(domX); domY = parseInt(domY); isMouseDown = true; } mousemove:获取当前鼠标位置->计算鼠标移动距离->计算dom当前位置 function mousemove(e) { if (isMouseDown) { // 移动距离 var distanceX = e.clientX - originX; var distanceY = e.clientY - originY; // 元素位置 var curX = domX + distanceX; var curY = domY + distanceY; dom.setAttribute("x", curX); dom.setAttribute("y", curY); } } mouseup: function mouseup(e) { isMouseDown = false; // 取消按钮 }
借助svg，我们可以画出多种多样的图形，而且利用g标签，还可以把多个标签组合在一起，让他们具有相同的行为。 语法也比较简洁，希望还么有接触过的同学，学习一下。 要实现拖动功能（大神绕行…），我们需要给元素定义mousedown(响应鼠标在元素范围按住），mousemove(移动），mouseup(松开鼠标），先定义一个rect标签(有机会补图）。 然后现在我们添加代码来处理选中的元素 var currentX = 0; var currentY = 0; var currentMatrix = 0; function selectElement(evt) { selectedElement = evt.target; currentX = evt.clientX; currentY = evt.clientY; currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' '); for(var i=0; i |
| CopyRight 2018-2019 实验室设备网 版权所有 |