您现在的位置是：首页 > 文章详情

JavaScript - 元素拖动

日期：2019-05-05点击：296收藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript实现元素拖动</title> <style> *{ margin: 0; } #app{ width: 100vw; height: 100vh; background: #9acfea; position: relative; } #content{ width: 100px; height: 100px; position: fixed; background: #ff6700; border-radius: 10px; cursor: pointer; } </style> </head> <body> <div id="app"> <div id="content" data-type="0"></div> </div> <script type="text/javascript"> let content = document.getElementById("content"); window.onmousedown = function (ev) { /* * 获取当前鼠标左键位置元素 * */ let ele = document.elementFromPoint(ev.clientX,ev.clientY); /* * 如果该位置元素属性data-type值为1则将该元素设为选中态 * */ if (ev.buttons===1 && ele.dataset.type==="0"){ ele.dataset.selected = true; if (ev.offsetX ===0 && ev.offsetY===0){ content.dataset.x = ev.layerX.toString(); content.dataset.y = ev.layerY.toString(); } else { content.dataset.x = ev.offsetX.toString(); content.dataset.y = ev.offsetY.toString(); } } }; window.onmousemove = function (ev) { /* * 如果有选中态元素存在，移动选中态的元素 * */ if (content.dataset.selected === "true") { let pad_x = parseInt(content.dataset.x); let pad_y = parseInt(content.dataset.y); let flag = ev.clientX>pad_x && ev.clientX<window.innerWidth+pad_x-100 && ev.clientY>pad_y && ev.clientY<window.innerHeight+pad_y-100; if (flag){ content.style.marginLeft = (ev.clientX-pad_x)+'px'; content.style.marginTop = (ev.clientY-pad_y)+'px'; } } }; window.onmouseup = function (ev) { /* * 鼠标左键弹起后如果有选中态元素，将它设为未选中态 * */ if (content.dataset.selected = true) { content.dataset.selected = false; } } </script> </body> </html>

原文链接：https://yq.aliyun.com/articles/701366

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。