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避免数字计算精度误差的方法详解
Mar 05 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
React中的render何时执行过程
Apr 13 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
Vue中qs插件的使用详解
Feb 07 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中实现记住密码下次自动登录的例子
2014/11/06 PHP
php建立Ftp连接的方法
2015/03/07 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
用JS实现的一个include函数
2007/07/21 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python微信公众号开发简单流程实现
2020/03/09 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
《火烧云》教学反思
2014/04/12 职场文书
小学教育见习报告
2014/10/31 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技