js实现鼠标拖动功能


Posted in Javascript onMarch 20, 2017

效果图:

js实现鼠标拖动功能

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #div{
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  }
  #div2{
  width: 200px;
  height: 200px;
  background: gold;
  position: absolute;
  top: 200px;
  left: 200px;
  }
 </style>
 </head>
 <body>
 <div id="div">
 </div>
 <div id="div2"></div>
 <script>
  window.onload=function(){
  var div=document.getElementById("div");
  div.onmousedown=function(ev){
   var e=window.event || ev;
   //var Mydiv=document.getElementById("div");
   //获取到鼠标点击的位置距离div左侧和顶部边框的距离;
   var oX=e.clientX-div.offsetLeft;
   var oY=e.clientY-div.offsetTop;
   //当鼠标移动,把鼠标的偏移量付给div
   document.onmousemove=function(ev){
   //计算出鼠标在XY方向上移动的偏移量,把这个偏移量加给DIV的左边距和上边距,div就会跟着移动
   var e=window.event|| ev;
   div.style.left=e.clientX-oX+"px";
   div.style.top=e.clientY-oY+"px";
   }
   //当鼠标按键抬起,清除移动事件
   document.onmouseup=function(){
   document.onmousemove=null;
   document.onmouseup=null;
   }
  }
  var div2=document.getElementById("div2");
  div2.onmousedown=function(ev){
   var e=window.event || ev;
   //var Mydiv=document.getElementById("div");
   //获取到鼠标点击的位置距离div左侧和顶部边框的距离;
   var oX=e.clientX-div2.offsetLeft;
   var oY=e.clientY-div2.offsetTop;
   //当鼠标移动,把鼠标的偏移量付给div
   document.onmousemove=function(ev){
   //计算出鼠标在XY方向上移动的偏移量,把这个偏移量加给DIV的左边距和上边距,div就会跟着移动
   var e=window.event|| ev;
   div2.style.left=e.clientX-oX+"px";
   div2.style.top=e.clientY-oY+"px";
   }
   //当鼠标按键抬起,清除移动事件
   document.onmouseup=function(){
   document.onmousemove=null;
   document.onmouseup=null;
   }
  }
  }
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
BootStrap中
Dec 10 Javascript
几行js代码实现自适应
Feb 24 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 Javascript
基于vue2的table分页组件实现方法
Mar 20 #Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 #Javascript
基于vue.js实现侧边菜单栏
Mar 20 #Javascript
微信小程序 参数传递实例代码
Mar 20 #Javascript
vue.js指令v-model使用方法
Mar 20 #Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 #Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 #Javascript
You might like
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
json 实例详细说明教程
2009/10/31 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python定时执行之Timer用法示例
2015/05/27 Python
Python 处理图片像素点的实例
2019/01/08 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python类继承和多态原理解析
2020/02/05 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python算的上脚本语言吗
2020/06/22 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
党员实事承诺书
2014/03/26 职场文书
电教室标语
2014/06/20 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2014年统计工作总结
2014/11/21 职场文书
美术教师求职信范文
2015/03/20 职场文书
投诉信范文
2015/07/02 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis