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添加String.Format方法
Aug 11 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
jQuery中extend函数详解
Feb 13 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP常用处理静态操作类
2015/04/03 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
数组越界问题
2015/10/21 面试题
智能电子应届生求职信
2013/11/10 职场文书
调查研究项目计划书
2014/04/29 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
联谊会开场白
2015/06/01 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
2022年四月新番
2022/03/15 日漫