JS实现鼠标按下拖拽效果


Posted in Javascript onJuly 23, 2020

原生JS实现鼠标按下拖拽效果,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>鼠标拖动</title>
 <style type="text/css">
 body {
  margin: 0;
 }

 div {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: pink;
 }
 </style>
</head>

<body>

 <div onmousedown="downDiv(this)" onmousemove="moveDiv(this)" onmouseup="upDiv(this)">

 </div>



 <script>
 //定义变量储存div的宽高
 var obj_w, obj_h;
 //定义一个变量判断是否执行移动函数
 var mouseDown = false;

 //鼠标按下函数
 function downDiv(obj) {
  //获取div的宽高
  obj_w = obj.offsetWidth;
  obj_h = obj.offsetHeight;
  //鼠标
  var e = event || window.event;
  //e.clientX/Y 是获取鼠标相对浏览器的位置;将div中心自动居中到鼠标
  obj.style.left = (e.clientX - obj_w / 2) + "px";
  obj.style.top = (e.clientY - obj_h / 2) + "px";
  console.log(obj.style.left, obj.style.top)
  //按下时为ture,松开时为false,以判断是否执行执行mouveDiv
  mouseDown = true;

 }

 //鼠标移动函数
 function moveDiv(obj) {
  obj_w = obj.offsetWidth;
  obj_h = obj.offsetHeight;
  var e = event || window.event;
  console.log(e.clientX, e.clientY);
  console.log(obj_w, obj_h);
  if (mouseDown) {
  obj.style.left = (e.clientX - obj_w / 2) + "px";
  obj.style.top = (e.clientY - obj_h / 2) + "px";
  console.log(obj.style.left, obj.style.top)
  }

 }

 //鼠标松开函数
 function upDiv(obj) {
  mouseDown = false;
 }

 </script>
</body>

</html>

更多精彩文章请点击专题: Javascript拖拽特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
vue实现文件上传功能
Aug 13 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
javascript利用canvas实现鼠标拖拽功能
Jul 23 #Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 #Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 #Javascript
JS前后端实现身份证号验证代码解析
Jul 23 #Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 #Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 #Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 #Javascript
You might like
php生成文件
2007/01/15 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
Javascript浅谈之this
2013/12/17 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
python 产生token及token验证的方法
2018/12/26 Python
python小程序实现刷票功能详解
2019/07/17 Python
python实现逻辑回归的示例
2020/10/09 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
Java对文件的读写操作方法
2022/04/29 Java/Android