最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS实现简单拖拽效果
时间:2022-06-29 01:28:36 编辑:袖梨 来源:一聚教程网
本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下
代码如下 | 复制代码 |
#wrap { position: relative; border: 1px solid #000; width: 800px; height: 500px; } #drog { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: red; cursor: move; } (function(){ var drog = document.querySelector('#drog'); /* 1.记录按下的时候的鼠标位置 2.记录按下的时候元素的位置 */ drog.onmousedown = function(e){ var startElY = css(drog,"top"); var startElX = css(drog,"left"); var startMouseX = e.clientX; var startMouseY = e.clientY;
/* 求出鼠标移动的距离, 操作元素也移动相应的距离
为了可以一直跟随,所以添加给document */ document.onmousemove = function(e){ var nowMouseX = e.clientX; var nowMouseY = e.clientY; var disX = nowMouseX - startMouseX; var disY = nowMouseY - startMouseY; var x = disX + startElX; var y = disY + startElY; css(drog,"left",x); css(drog,"top",y); }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; }; })(); |
相关文章
- 王者荣耀世界是手游吗 游戏模式详细介绍 07-08
- Lyn Alden指出比特币股票与债券繁荣的两大关键驱动力 07-08
- 现代战舰005最强搭配是什么 055驱逐舰装备攻略 07-08
- 欧易苹果版如何下载?2025年苹果手机下载 欧易OKX交易所详细教程 07-08
- 虚拟币交易全攻略:从入门到实战的完整教程及APP推荐 07-08
- 二重螺旋锻造系统怎么玩 锻造材料获取方法详解 07-08