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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JavaScript 创建对象
Jul 17 Javascript
详解javascript遍历方式
Nov 11 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
基于node实现websocket协议
Apr 25 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
vue实现信息管理系统
May 30 Javascript
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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
JavaScript 特殊字符
2007/04/05 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
js仿微博动态栏功能
2017/02/22 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python实现进程间通信简单实例
2014/07/23 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
python生成任意频率正弦波方式
2020/02/25 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
利用python进行文件操作
2020/12/04 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
创业计划书撰写原则
2014/01/25 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
应用数学专业求职信
2014/03/14 职场文书
工作分析计划书
2014/04/30 职场文书
地质灾害防治方案
2014/05/14 职场文书
辞职信怎么写
2015/02/27 职场文书
评职称个人总结
2015/03/05 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
海弦WR-800F
2022/04/05 无线电
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server