使用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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
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
农民C键的运用技巧
2020/03/04 星际争霸
劣质的PHP代码简化
2010/02/08 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
python字符串过滤性能比较5种方法
2017/06/22 Python
Python内建模块struct实例详解
2018/02/02 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
文秘专业大学生求职信
2013/11/10 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
2014植树节活动总结
2014/03/11 职场文书
初三学习计划书范文
2014/04/30 职场文书
民间借贷协议书范本
2014/10/01 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
《比的意义》教学反思
2016/02/18 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
入党申请书怎么写?
2019/06/21 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
springcloud整合seata
2022/05/20 Java/Android