JS实现简单拖拽效果
2017-06-21 08:36
886 查看
本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #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; } </style> </head> <body> <div id="wrap"> <div id="drog"></div> </div> <script type="text/javascript" src="startmove.js"></script> <script type="text/javascript"> (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; }; }; })(); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- js最简单的拖拽效果实现代码
- 使用js实现的简单拖拽效果
- js实现简单鼠标拖拽,文件拖入文件夹效果
- js最简单的拖拽效果实现代码
- 简单实现js拖拽效果
- 分享超简单实用的用JS实现DIV、图片圆角效果,关键是很兼容
- jquery方法+js一般方法+js面向对象方法实现拖拽效果
- 一个超简单的JS拖拽实现代码(兼容IE,Firefox)
- js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
- 最简单的js图片切换效果实现代码
- 用js实现简单的左右两边固定广告效果
- 利用JS实现简单的弹出窗品效果
- 简单JS实现走马灯效果的文字(无需jQuery)
- JS简单实用的倒计时效果实现代码
- 使用CoreAnimation实现最简单的拖拽转盘效果
- 用js实现简单的点击返回顶部效果
- js 实现无干扰阴影效果 简单好用(附文件下载)
- 百度空间中实现拖拽、悬浮窗口效果的popup.js分析
- JS 拖动效果实现代码 比较简单
- 关于js实现最简单的拖拽