使用javaScript实现鼠标拖拽事件

不管怎样,生活还是要继续向前走去。有的时候伤害和失败不见得是一件坏事,它会让你变得更好,孤单和失落亦是如此。每件事到最后一定会变成一件好事,只要你能够走到最后。纸上得来终觉浅,绝知此事要躬行。

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

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

您可能有感兴趣的文章
JS获取鼠标点击时的位置

AJAX实现鼠标经过弹出详细介绍示例

利用AJAX实现鼠标悬浮获取值的代码

AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】