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 相关文章推荐
jQuery实现id模糊查询的小例子
Mar 19 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
JavaScript实现密码强度实时验证
Mar 18 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 安全过滤函数代码
2011/05/07 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
初始Nodejs
2014/11/08 NodeJs
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python绘制封闭多边形教程
2020/02/18 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python脚本定时发送邮件
2020/12/22 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
幼儿园家长评语
2014/02/10 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
医学求职自荐信
2014/06/21 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014年维稳工作总结
2014/11/18 职场文书
参观邀请函范文
2015/02/02 职场文书