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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
新手vue构建单页面应用实例代码
Sep 18 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
JavaScript如何判断对象有某属性
Jul 03 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
PHP 危险函数全解析
2009/09/09 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
详解Python中for循环的使用
2015/04/14 Python
python简单文本处理的方法
2015/07/10 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python学习必备知识汇总
2017/09/08 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python和Go语言的区别总结
2019/02/20 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
会计电算化专业应届大学生求职信
2013/10/22 职场文书
安全大检查反思材料
2014/01/31 职场文书
《散步》教学反思
2014/03/02 职场文书
置业顾问岗位职责
2014/03/02 职场文书
公司会议策划方案
2014/05/17 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
员工试用期自我评价
2014/09/18 职场文书
投资意向协议书
2015/01/29 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
公司职员入党自传书
2015/06/26 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技