JavaScript鼠标拖拽事件详解


Posted in Javascript onApril 03, 2020

本文实例为大家分享了js鼠标拖拽事件的详细实现代码,供大家参考,具体内容如下

图片如下:

JavaScript鼠标拖拽事件详解

css代码

<style>
 *{
 margin:0;
 padding:0;
 }
 #box{
 width: 200px;
 height: 200px;
 background: url("./img/aio.png") no-repeat;
 background-size: cover;
 position: absolute;/*定位元素 父级元素window就是初始包含块*/
 top:0;
 left:0;
 }
</style>

html代码

<div id="box"></div>

js代码

<script>
 //获取标签
 var box=document.getElementById("box");
 var body=document.body;
 var x,y;//全局作用域
 //鼠标按下事件 0级
 box.onmousedown=function(e) {//传入形参e
 var mx=e.clientX;//鼠标距离浏览器左
 var my=e.clientY;//鼠标距离浏览器上
 var bx=box.offsetLeft;//盒子距离浏览器左
 var by=box.offsetTop;//盒子距离浏览器上
 x=mx-bx;//实际盒子距离的浏览器左
 y=my-by;//实际盒子距离的浏览器上
 //鼠标移动事件 0级
 body.onmousemove=function(e) {//拿到全局x、y、
  //获取当前鼠标移动到的坐标点
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距离浏览器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";

 };
 //鼠标弹起事件(松开)
 box.onmouseup=function(e) {
  body.onmousemove=null;//不做任何操作//dom0级事件解除事件绑定
  //获取当前鼠标移动到的坐标点
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距离浏览器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";
 }
 };
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
vue axios请求超时的正确处理方法
Apr 02 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
Javascript组合继承方法代码实例解析
Apr 02 #Javascript
Javascript异步编程async实现过程详解
Apr 02 #Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 #Javascript
JavaScript运动原理基础知识详解
Apr 02 #Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 #Javascript
webpack3.0升级4.0的方法步骤
Apr 02 #Javascript
Javascript模块化机制实现原理详解
Apr 02 #Javascript
You might like
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHPThumb图片处理实例
2014/05/03 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
phpwind放自动注册方法
2006/12/02 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
独特的python循环语句
2016/11/20 Python
python实现Adapter模式实例代码
2018/02/09 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
Python变量类型知识点总结
2019/02/18 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Django实现跨域请求过程详解
2019/07/25 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
销售行业个人求职自荐信
2013/09/25 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
供应链金融服务方案
2014/05/25 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android