Fallstudie zur Implementierung eines JavaScript-Mausziehereignisses-js-Tutorial-php.cn

Fallstudie zur Implementierung eines JavaScript-Mausziehereignisses

黄舟

Freigeben： 2017-09-28 10:30:46

Original

2154 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Verwendung von Javascript zum Implementieren von Mausziehereignissen vor. Er hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit Ihnen geteilt Der spezifische Code zum Implementieren von Mausziehereignissen in js dient als Referenz. Der spezifische Inhalt lautet wie folgt:

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

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

    <script>

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

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

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

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

        //获取p坐标
        dx = move_p.offsetLeft;
        dy = move_p.offsetTop;

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

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

        //实时更新p的坐标
        dx = move_p.offsetLeft;
        dy = move_p.offsetTop;

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

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

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

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

        }

      }

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


    </script>

  </head>
  <body>

    <p id="move_p" onmousedown="down()" onmouseup="up()" onmousemove="move()"></p>

  </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFallstudie zur Implementierung eines JavaScript-Mausziehereignisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!