首页 > 编程 > JavaScript > 正文

使用javaScript实现鼠标拖拽事件

2019-11-19 15:17:08
字体:
来源:转载
供稿:网友

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表