快捷導(dǎo)航

使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件

更新時(shí)間：2020年04月03日 08:31:48 作者：Z_唐

這篇文章主要為大家詳細(xì)介紹了使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)鼠標(biāo)拖拽事件的具體代碼，供大家參考，具體內(nèi)容如下

<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>

   /*
    * 分析：
    * 獲取鼠標(biāo)實(shí)時(shí)移動(dòng)的坐標(biāo)；m_move_x,m_move_y
    * 鼠標(biāo)按下時(shí)的坐標(biāo)；m_down_x,m_down_y
    * div的坐標(biāo)；dx,dy
    * 鼠標(biāo)按下時(shí)，鼠標(biāo)與div的偏移量；md_x,md_y
    * div的新坐標(biāo)；ndx,ndy
    */

   var isDown = false;//記錄鼠標(biāo)狀態(tài)
   var move_div ;//要操作的div對(duì)象
   var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

   //鼠標(biāo)按下
   function down(){
    move_div = document.getElementById("move_div");
    isDown = true;

    //獲取鼠標(biāo)按下時(shí)坐標(biāo)
    m_down_x = event.pageX;
    m_down_y = event.pageY;

    //獲取div坐標(biāo)
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //獲取鼠標(biāo)與div偏移量
    md_x = m_down_x - dx;
    md_y = m_down_y - dy;
   }

   //鼠標(biāo)移動(dòng)
   function move(){
    move_div = document.getElementById("move_div");

    //實(shí)時(shí)更新div的坐標(biāo)
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //獲取鼠標(biāo)移動(dòng)實(shí)時(shí)坐標(biāo)
    m_move_x = event.pageX;
    m_move_y = event.pageY;

    //鼠標(biāo)按下時(shí)移動(dòng)才觸發(fā)
    if(isDown){

     //獲取新div坐標(biāo)，鼠標(biāo)實(shí)時(shí)坐標(biāo) - 鼠標(biāo)與div的偏移量
     ndx = m_move_x - md_x;
     ndy = m_move_y - md_y;

     //把新div坐標(biāo)值賦給div對(duì)象
     move_div.style.left = ndx+"px";
     move_div.style.top = ndy+"px";

    }

   }

   //鼠標(biāo)釋放
   function up(){
    isDown = false;
   }


  </script>

 </head>
 <body>

  <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>

 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: