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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
jquery常用的12个小功能
Jul 22 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
js实现div色块拖动录制
Jan 16 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(2)
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
php微信开发之图片回复功能
2018/06/14 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
python实现八大排序算法(2)
2017/09/14 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
揠苗助长教学反思
2014/02/04 职场文书
会计核算科岗位职责
2014/03/19 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
先进人物事迹材料
2014/12/29 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python