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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
node.js实现登录注册页面
Apr 08 Javascript
js实现input密码框显示/隐藏功能
Sep 10 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
请离开include_once和require_once
2013/07/18 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
JS与C#编码解码
2013/12/03 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
原生js实现分页效果
2020/09/23 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
医德医魂心得体会
2014/09/11 职场文书
2016年党建工作简报
2015/11/26 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis