javascript實現(xiàn)完美拖拽效果
更新時間:2015年05月06日 10:39:15 投稿:hebedich
javascript實現(xiàn)的拖拽效果,可以把屏幕上的圖片拖動到任意地方,效果平滑,點擊圖片還可以從側邊展開圖片的詳細信息,非常好的相冊效果
拖拽的原理
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,干掉系統(tǒng)默認
return false;
}
}
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關文章
如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫
這篇文章主要介紹了如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫,對惰性求值感興趣的同學,可以參考下2021-05-05
JavaScript實現(xiàn)字符串與HTML格式相互轉換
這篇文章主要介紹了JavaScript實現(xiàn)字符串與HTML格式相互轉換,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
javascript如何實現(xiàn)360度全景照片問題匯總
這篇文章主要為大家詳細匯總了javascript如何實現(xiàn)360度全景照片問題,感興趣的朋友可以參考一下2016-04-04

