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写的一个万年历(自写)
Jan 20 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
原生js+canvas实现验证码
Nov 29 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二进制加密与解密的解决办法
2013/04/22 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JavaScript—window对象使用示例
2013/12/09 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
pandas对指定列进行填充的方法
2018/04/11 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
python批量处理文件或文件夹
2020/07/28 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
python怎么删除缓存文件
2020/07/19 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
土木工程实习生自我鉴定
2013/09/19 职场文书
药品业务员岗位职责
2014/04/17 职场文书
英语教师求职信
2014/06/16 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
2014年教研员工作总结
2014/12/23 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书