javascript實現完美拖拽效果

 　　javascript實現的拖拽效果，可以把屏幕上的圖片拖動到任意地方，效果平滑，點擊圖片還可以從側邊展開圖片的詳細信息，非常好的相冊效果

　　拖拽的原理

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

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

　　3.判斷是否過界

　　html代碼：

　　?

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

　　css代碼：

　　?

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

　　javascript代碼：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 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; } }

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

        注< >：更多精彩教程請關注三聯編程