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 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
node.js实现爬虫教程
Aug 25 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
vue-loader教程介绍
Jun 14 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
手把手教你如何编译打包video.js
Dec 09 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
python爬虫增加访问量的方法
2019/08/22 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
财务副总经理工作职责
2013/11/25 职场文书
青年志愿者活动方案
2014/08/17 职场文书
技术员岗位职责
2015/02/04 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
爱的教育观后感
2015/06/17 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技