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. window.onload=function(){ 
2. var oDiv=document.getElementById("div1"); 
3. var x=0; 
4. var y=0; 
5. oDiv.onmousedown=function(ev){ 
6. var oEvent=ev||event; 
7. //鼠標的橫坐標減去div的offsetLeft 
8. x=oEvent.clientX-oDiv.offsetLeft; 
9. //鼠標的縱坐標減去div的offsetTop 
10. y=oEvent.clientY-oDiv.offsetTop;  
11.  
12. document.onmousemove=function(ev){ 
13. var oEvent=ev||event;  
14. var left=oEvent.clientX-x; 
15. var right=oEvent.clientY-y; 
16. //判斷左邊是否過界 
17. if(left<0){ 
18. left=0; 
19. } 
20. //判斷右邊是否過界 
21. else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){ 
22. left=document.documentElement.clientWidth-oDiv.offsetWidth; 
23. } 
24. //判斷上邊是否過界 
25. if(right<0){ 
26. right=0; 
27. } 
28. //判斷下邊是否過界 
29. else if(right>document.documentElenment.clientHeight){ 
30. right=document.documentElenment.clientHeight-oDiv.offsetHeight; 
31. } 
32. oDiv.style.left=left+"px"; 
33. oDiv.style.top=right+"px"; 
34. }  
35. document.onmouseup=function(){ 
36. //清空document的事件 
37. document.onmousemove=null; 
38. document.onmouseup=null; 
39. } 
40. //解決低版本火狐bug，干掉系統默認 
41. return false; 
42. } 
43. } 

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