最新下载
热门教程
- 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; }; }; })(); |
相关文章
- 《燕云十六声》红尘无眼完成图文攻略 12-25
- 《燕云十六声》阴阳如影完成图文攻略 12-25
- 《燕云十六声》悬檐之下四架椽屋图文攻略 12-25
- 《燕云十六声》2024最新公测时间介绍 12-25
- 《燕云十六声》有没有藏宝阁 12-25
- 《燕云十六声》制作公司介绍 12-25