国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

javascript實現完美拖拽效果

2019-11-20 12:32:47
字體:
來源:轉載
供稿:網友

拖拽的原理

1.獲取距離(鼠標的位置-odiv的外邊距)

2.理解什么時候用onmousemove事件

3.判斷是否過界

html代碼:

<div id="div1"></div>

css代碼:

#div1{width:100px;height:100px;background:red;position:absolute}

javascript代碼:

window.onload=function(){  var oDiv=document.getElementById("div1");  var x=0;  var y=0;  oDiv.onmousedown=function(ev){    var oEvent=ev||event;    //鼠標的橫坐標減去div的offsetLeft    x=oEvent.clientX-oDiv.offsetLeft;    //鼠標的縱坐標減去div的offsetTop    y=oEvent.clientY-oDiv.offsetTop;          document.onmousemove=function(ev){      var oEvent=ev||event;         var left=oEvent.clientX-x;      var right=oEvent.clientY-y;      //判斷左邊是否過界      if(left<0){        left=0;      }      //判斷右邊是否過界      else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){        left=document.documentElement.clientWidth-oDiv.offsetWidth;      }      //判斷上邊是否過界      if(right<0){        right=0;      }      //判斷下邊是否過界      else if(right>document.documentElenment.clientHeight){        right=document.documentElenment.clientHeight-oDiv.offsetHeight;      }      oDiv.style.left=left+"px";      oDiv.style.top=right+"px";    }       document.onmouseup=function(){      //清空document的事件      document.onmousemove=null;      document.onmouseup=null;    }    //解決低版本火狐bug,干掉系統默認    return false;  }}

以上所述就是本文的全部內容了,希望大家能夠喜歡。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 浪卡子县| 科尔| 镇雄县| 灵山县| 界首市| 永靖县| 平遥县| 武义县| 友谊县| 新闻| 青海省| 太康县| 双辽市| 黄浦区| 富平县| 新昌县| 丹寨县| 龙门县| 长白| 家居| 和龙市| 通江县| 历史| 精河县| 澎湖县| 西城区| 汽车| 奈曼旗| 榆社县| 武威市| 六盘水市| 田林县| 汕头市| 繁昌县| 娄烦县| 洛川县| 龙胜| 天台县| 和田市| 含山县| 宁津县|