使用javaScript实现鼠标拖拽事件


Posted in Javascript onApril 03, 2020

本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>

  <style>
   body{
    margin: 0;
    padding: 0;
   }
   div{
    position: absolute;
    top: 200px;/*div的y轴*/
    left: 150px;/*div的x轴*/
    width: 300px;
    height: 200px;
    background-color: gray;
   }
   div:hover{
    cursor: move;
   }
  </style>

  <script>

   /*
    * 分析:
    * 获取鼠标实时移动的坐标;m_move_x,m_move_y
    * 鼠标按下时的坐标;m_down_x,m_down_y
    * div的坐标;dx,dy
    * 鼠标按下时,鼠标与div的偏移量;md_x,md_y
    * div的新坐标;ndx,ndy
    */

   var isDown = false;//记录鼠标状态
   var move_div ;//要操作的div对象
   var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

   //鼠标按下
   function down(){
    move_div = document.getElementById("move_div");
    isDown = true;

    //获取鼠标按下时坐标
    m_down_x = event.pageX;
    m_down_y = event.pageY;

    //获取div坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标与div偏移量
    md_x = m_down_x - dx;
    md_y = m_down_y - dy;
   }

   //鼠标移动
   function move(){
    move_div = document.getElementById("move_div");

    //实时更新div的坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标移动实时坐标
    m_move_x = event.pageX;
    m_move_y = event.pageY;

    //鼠标按下时移动才触发
    if(isDown){

     //获取新div坐标,鼠标实时坐标 - 鼠标与div的偏移量
     ndx = m_move_x - md_x;
     ndy = m_move_y - md_y;

     //把新div坐标值赋给div对象
     move_div.style.left = ndx+"px";
     move_div.style.top = ndy+"px";

    }

   }

   //鼠标释放
   function up(){
    isDown = false;
   }


  </script>

 </head>
 <body>

  <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>

 </body>
</html>

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

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue-cli项目中怎么使用mock数据
Sep 27 #Javascript
javaScript实现复选框全选反选事件详解
Nov 20 #Javascript
javaScript实现滚动条事件详解
Mar 24 #Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python分布式环境下的限流器的示例
2017/10/26 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
2014年新生军训方案
2014/05/01 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
特教教师先进事迹
2014/05/21 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
语文教师求职信范文
2015/03/20 职场文书
vue打包时去掉所有的console.log
2022/04/10 Vue.js