使用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 相关文章推荐
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue组件的写法汇总
Apr 12 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
vue实现通讯录功能
Jul 14 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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
php异常处理使用示例
2014/02/25 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php生成无限栏目树
2017/03/16 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
tensorboard显示空白的解决
2020/02/15 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
个人应聘自我评价分享
2013/11/18 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
旷课检讨书2000字
2014/01/14 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
建议书格式
2015/02/04 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技