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 相关文章推荐
jquery 触发a链接点击事件解决方案
May 02 Javascript
Javascript中神奇的this
Jan 20 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
在JavaScript中如何使用宏详解
May 06 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP实现搜索相似图片
2015/09/22 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
jQuery中each()方法用法实例
2014/12/27 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
js实现日历的简单算法
2017/01/24 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
python实现用户登录系统
2016/05/21 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python调用C/C++的方法解析
2020/08/05 Python
python time()的实例用法
2020/11/03 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
Java中实现多态的机制
2015/08/09 面试题
法务专员岗位职责
2014/01/02 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
青年标兵事迹材料
2014/08/16 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
统招统分证明
2015/06/23 职场文书