JS鼠標(biāo)拖拽實例分析

更新時間：2015年11月23日 16:29:31 作者：yexingwen

這篇文章主要介紹了JS鼠標(biāo)拖拽實現(xiàn)方法,實例分析JavaScript鼠標(biāo)事件及頁面元素屬性動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS鼠標(biāo)拖拽實現(xiàn)方法。分享給大家供大家參考，具體如下：

JS代碼：

<script>
window.onload=function()
{
  var oDiv=document.getElementById('div');
  var disX=0;
  var disY=0;
  oDiv.onmousedown=function(ev) //鼠標(biāo)按下DIV
  {
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft; //鼠標(biāo)的X坐標(biāo)減去DIV的左邊距就等于disX, 這個disXs是用于確定鼠標(biāo)移動DIV時鼠標(biāo)點和DIV之間的左面距離，這個距離是不會變的，通過這個新鼠標(biāo)的X坐標(biāo)減去disX就是DIV的Left
    disY=oEvent.clientY-oDiv.offsetTop; //鼠標(biāo)的Y坐標(biāo)減去DIV的左邊距就等于disY, 這個disY是用于確定鼠標(biāo)移動DIV時鼠標(biāo)點和DIV之間的上面距離，這個距離是不會變的，通過這個新鼠標(biāo)的Y坐標(biāo)減去disY就是DIV的Top
    document.onmousemove=function(ev) //為了防止鼠標(biāo)移動太快而離開了DIV產(chǎn)生了bug，所以要給整個頁面加onmousemove事件
    {
      var oEvent=ev||event;
      var oLeft=oEvent.clientX-disX; //新鼠標(biāo)X坐標(biāo)減去disX,也就是鼠標(biāo)移動DIV后的Left
      var oTop=oEvent.clientY-disY; //新鼠標(biāo)Y坐標(biāo)減去disY,也就是鼠標(biāo)移動DIV后的Top
      if(oLeft<0) //當(dāng)DIV的Left小于0，也就是移出左邊
      {
        oLeft=0; //就把DIV的Left設(shè)置為0，就不能移出左邊
      }
      else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕寬度減去DIV的寬度就得出了DIV到達最右邊的寬度，如果Left大于這個像素
      {
        oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left設(shè)置為這個像素
      }
      if(oTop<0) //當(dāng)DIV的To小于0，也就是移出左邊
      {
        oTop=0; //就把DIV的Top設(shè)置為0，就不能移出上邊
      }
      else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度減去DIV的高度就得出了DIV到達最下面邊的像素，如果Top大于這個像素
      {
        oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top設(shè)置為這個像素
      }
      oDiv.style.left=oLeft+'px'; //DIV的Left設(shè)置為新鼠標(biāo)X坐標(biāo)減去disX的值
      oDiv.style.top=oTop+'px'; //DIV的Top設(shè)置為新鼠標(biāo)Y坐標(biāo)減去disY的值
    };
    document.onmouseup=function() //鼠標(biāo)松開時
    {
      document.onmousemove=null; //把鼠標(biāo)移動清楚
      document.onmouseup=null; //把鼠標(biāo)松開清楚
    };
    return false; //阻止FireFox的默認(rèn)事件 bug
  };
};
</script>

完整代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;}
</style>
<script>
window.onload=function()
{
  var oDiv=document.getElementById('div');
  var disX=0;
  var disY=0;
  oDiv.onmousedown=function(ev) //鼠標(biāo)按下DIV
  {
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft; //鼠標(biāo)的X坐標(biāo)減去DIV的左邊距就等于disX, 這個disXs是用于確定鼠標(biāo)移動DIV時鼠標(biāo)點和DIV之間的左面距離，這個距離是不會變的，通過這個新鼠標(biāo)的X坐標(biāo)減去disX就是DIV的Left
    disY=oEvent.clientY-oDiv.offsetTop; //鼠標(biāo)的Y坐標(biāo)減去DIV的左邊距就等于disY, 這個disY是用于確定鼠標(biāo)移動DIV時鼠標(biāo)點和DIV之間的上面距離，這個距離是不會變的，通過這個新鼠標(biāo)的Y坐標(biāo)減去disY就是DIV的Top
    document.onmousemove=function(ev) //為了防止鼠標(biāo)移動太快而離開了DIV產(chǎn)生了bug，所以要給整個頁面加onmousemove事件
    {
      var oEvent=ev||event;
      var oLeft=oEvent.clientX-disX; //新鼠標(biāo)X坐標(biāo)減去disX,也就是鼠標(biāo)移動DIV后的Left
      var oTop=oEvent.clientY-disY; //新鼠標(biāo)Y坐標(biāo)減去disY,也就是鼠標(biāo)移動DIV后的Top
      if(oLeft<0) //當(dāng)DIV的Left小于0，也就是移出左邊
      {
        oLeft=0; //就把DIV的Left設(shè)置為0，就不能移出左邊
      }
      else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕寬度減去DIV的寬度就得出了DIV到達最右邊的寬度，如果Left大于這個像素
      {
        oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left設(shè)置為這個像素
      }
      if(oTop<0) //當(dāng)DIV的To小于0，也就是移出左邊
      {
        oTop=0; //就把DIV的Top設(shè)置為0，就不能移出上邊
      }
      else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度減去DIV的高度就得出了DIV到達最下面邊的像素，如果Top大于這個像素
      {
        oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top設(shè)置為這個像素
      }
      oDiv.style.left=oLeft+'px'; //DIV的Left設(shè)置為新鼠標(biāo)X坐標(biāo)減去disX的值
      oDiv.style.top=oTop+'px'; //DIV的Top設(shè)置為新鼠標(biāo)Y坐標(biāo)減去disY的值
    };
    document.onmouseup=function() //鼠標(biāo)松開時
    {
      document.onmousemove=null; //把鼠標(biāo)移動清楚
      document.onmouseup=null; //把鼠標(biāo)松開清楚
    };
    return false; //阻止FireFox的默認(rèn)事件 bug
  };
};
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: