JS中的拖拽示例:
1)實現拖拽思路:當鼠標按下和拖拽過程中,鼠標與拖拽物體之間的相對距離保持不變
2)實現拖拽遇到的問題:
問題1:當鼠標按下移動過快時,離開了拖拽的物體時,這時拖拽物體將不再隨着鼠標移動
因為拖拽的div太小了,這時我們可以將在拖拽物體上的mousemove事件放到document上面
同時將mouseup也改為document上面的事件
IE下直接用obj.setCapture()即可解決,但要做三個瀏覽器的兼容問題
問題2:在FF中第二次拖拽,空div的Bug
解決方法:在mousedown函數上面添加阻止默認行為即可:return false;
問題3:會出現將div脫出瀏覽器窗口的情況,用戶體驗不好
解決方法:限制div的拖動范圍
問題4:對於圖片拖拽--阻止默認事件return false
問題5:當拖拽圖片或者div時,經過其他文字時,會出現文字選中
解決方法：
1.阻止默認事件return false
--return false為新版瀏覽器FF,Chrome,IE9-11阻止了這個問題,但是IE8以下卻不行
2.IE下解決拖拽時文字選中問題--用事件捕獲(只寫IE下認識的事件),要解決兼容問題
3)事件捕獲:只有IE識別
obj.setCapture()--作用是將整個網頁中所有的事件集中在某個對象上,即網頁中的其他對象不能獲得事件
obj.releaseCapture()--解除事件捕獲
示例1:拖拽1,不拖出對象的父級dragDiv
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 #dragDiv{ 10 width:400px; 11 height: 400px; 12 background: #ccc; 13 position: relative; 14 margin: 20px; 15 } 16 #drag{ 17 width: 100px; 18 height: 100px; 19 background: red; 20 position: absolute; 21 } 22 </style>
23 </head>
24 <body>
25 <div id="dragDiv">
26 11111111111111111111
27 <div id="drag">拖拽2-有范圍拖拽</div>
28 </div>
29
30
31 <script type="text/javascript">
32 window.onload=function(){ 33 //拖拽,不拖出對象的父級dragDiv
34 var oDragDiv=document.getElementById('dragDiv'); 35 var oDrag=document.getElementById('drag'); 36 oDrag.onmousedown=function(ev){ 37 var oEvent=ev||event; 38 var pos=getMousePosition(oEvent); 39 var disX=pos.x-oDrag.offsetLeft; 40 var disY=pos.y-oDrag.offsetTop; 41 if(oDrag.setCapture){ 42 //兼容IE7-11
43 oDrag.onmousemove=Mousemove; 44 oDrag.onmouseup=mouseUp; 45 oDrag.setCapture(); 46 }else{ 47 //兼容FF,Chrome
48 document.onmousemove=Mousemove; 49 document.onmouseup=mouseUp; 50 } 51
52 function getMousePosition(ev){ 53 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 54 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 55 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}; 56 }; 57 //合並代碼
58 function Mousemove(ev){ 59 var oEvent=ev||event 60 var pis=getMousePosition(oEvent); 61 var l=pis.x-disX; 62 var t=pis.y-disY; 63
64 //限制范圍,磁性吸附,快接近父級時,自動吸附上去
65 if (l<30) { 66 l=0; 67 }else if(l>oDragDiv.offsetWidth-oDrag.offsetWidth){ 68 l=oDragDiv.offsetWidth-oDrag.offsetWidth; 69 } 70 if (t<30) { 71 t=0; 72 }else if(t>oDragDiv.offsetHeight-oDrag.offsetHeight){ 73 t=oDragDiv.offsetHeight-oDrag.offsetHeight; 74 } 75 oDrag.style.left=l+'px'; 76 oDrag.style.top=t+'px'; 77 }; 78 function mouseUp(){ 79 //當鼠標抬起時,mousemove/up清空
80 this.onmousemove=null; 81 this.onmouseup=null; 82 if (oDrag.releaseCapture) { 83 oDrag.releaseCapture(); 84 } 85 }; 86 return false; //FF等高版本瀏覽器中阻止默認行為
87 }; 88 } 89 </script>
90 </body>
91 </html>
示例2:帶框的拖拽:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 #dragDiv1{ 10 width:400px; 11 height: 400px; 12 background: #ccc; 13 position: relative; 14 margin: 20px; 15 } 16 #drag1{ 17 width: 100px; 18 height: 100px; 19 background: red; 20 position: absolute; 21 } 22 .box{ 23 border: 1px dashed black; 24 position: absolute; 25 } 26 </style>
27 </head>
28 <body>
29 <div id="dragDiv1">
30 11111111111111111111
31 <div id="drag1">拖拽2-帶框拖拽</div>
32 </div>
33
34
35 <script type="text/javascript">
36 window.onload=function(){ 37 //拖拽3:結合DOM,帶框的拖拽
38 var oDragDiv1=document.getElementById('dragDiv1'); 39 var oDrag1=document.getElementById('drag1'); 40 oDrag1.onmousedown=function(ev){ 41 var oEvent=ev||event; 42 var pos=getMousePosition(oEvent); 43 var disX=pos.x-oDrag1.offsetLeft; 44 var disY=pos.y-oDrag1.offsetTop; 45 //定義拖出來的框
46 var oBox=document.createElement('div'); 47 oBox.className='box'; 48 oBox.style.width=oDrag1.offsetWidth-2+'px'; 49 oBox.style.height=oDrag1.offsetHeight-2+'px'; 50 //每次拖動時,給虛框div的初始位置和紅色實體初始位置相同,防止虛框閃動
51 oBox.style.left=oDrag1.offsetLeft+'px'; 52 oBox.style.top=oDrag1.offsetTop+'px'; 53 oDragDiv1.appendChild(oBox); 54 if(oBox.setCapture){ 55 //兼容IE7-11
56 oBox.onmousemove=Mousemove; 57 oBox.onmouseup=mouseUp; 58 oBox.setCapture(); 59 }else{ 60 //兼容FF,Chrome
61 document.onmousemove=Mousemove; 62 document.onmouseup=mouseUp; 63 } 64
65 function getMousePosition(ev){ 66 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 67 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 68 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}; 69 }; 70 //合並代碼
71 function Mousemove(ev){ 72 var oEvent=ev||event 73 var pis=getMousePosition(oEvent); 74 var l=pis.x-disX; 75 var t=pis.y-disY; 76
77 //3.限制范圍,磁性吸附,快接近父級時,自動吸附上去
78 if (l<30) { 79 l=0; 80 }else if(l>oDragDiv1.offsetWidth-oBox.offsetWidth){ 81 l=oDragDiv1.offsetWidth-oBox.offsetWidth; 82 } 83 if (t<30) { 84 t=0; 85 }else if(t>oDragDiv1.offsetHeight-oBox.offsetHeight){ 86 t=oDragDiv1.offsetHeight-oBox.offsetHeight; 87 } 88 oBox.style.left=l+'px'; 89 oBox.style.top=t+'px'; 90 }; 91 function mouseUp(){ 92 //當鼠標抬起時,mousemove/up清空
93 this.onmousemove=null; 94 this.onmouseup=null; 95 oDrag1.style.left=oBox.offsetLeft+'px'; 96 oDrag1.style.top=oBox.offsetTop+'px'; 97 oDragDiv1.removeChild(oBox); 98 if (oBox.releaseCapture) { 99 oBox.releaseCapture(); 100 } 101 }; 102 return false; //FF中阻止默認行為
103 }; 104 } 105 </script>
106 </body>
107 </html>
示例3:拖拽實現自定義滾動條
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 #scroll{ 10 width: 500px; 11 height: 20px; 12 background: #ccc; 13 position: relative; 14 margin: 20px; 15 border-radius: 3px; 16 } 17 #drag2{ 18 width: 20px; 19 height: 20px; 20 background: red; 21 border-radius: 3px; 22 position: absolute; 23 } 24 #scrollCtrl{ 25 width: 150px; 26 height: 150px; 27 filter: alpha(opacity:0); 28 opacity: 0; 29 background: green; 30 margin: 20px; 31 } 32 #ctrlWords{ 33 width: 300px; 34 height: 400px; 35 border: 1px solid #000; 36 margin: 20px; 37 position: relative; 38 overflow: hidden; 39 } 40 #words{ 41 position: absolute; 42 top: 0; 43 left: 0; 44 } 45 </style>
46 </head>
47 <body>
48 <div id="scroll">
49 <div id="drag2"></div>
50 </div>
51 <div id="scrollCtrl"></div>
52
53 <div id="ctrlWords">
54 <div id="words">
55 每天開心快樂的生活是我們每個人追求的目標，有人孜孜不倦，苦苦追尋，仍找不到快樂的影蹤。有人默默不語，靜靜守候，快樂總是如期而至，伴其左右。 56
57 一名記者到一個集市上采訪，他看到一個年邁的老太太在一個角落里賣檸檬，“檸檬！檸檬！五毛錢一個！”老人有氣無力地喊着，老太太的生意顯然不太好，一上午也沒賣幾個。記者動了惻隱之心，打算把老太太的檸檬全部買下來，以使她能“高高興興地早些回家”。當他把自己的想法告訴老太太時，老太太的回答讓他大吃一驚：“我現在都賣給你了，那我下午賣什么”。 58
59 快樂對於這位老太太來說，就是踏踏實實的生活，體會身邊發生的點滴事情。我們的眼睛有時會欺騙我們，我們認為該煩惱的人其實是快樂的，而我們以為會快樂的人卻充滿了煩惱。真實的生活，往往會給人們帶來無窮樂趣，只要你懂得去感受，你一定會收獲快樂。 60
61 有一位為了金錢忙得焦頭爛額而且並不快樂的爸爸問女兒：“你快樂嗎？”女兒高興地回答說：“快樂”。迷惑不解的爸爸說：“那什么是快樂呢？”女兒天真地回答說：”比如現在，我們都吃完了晚飯，你陪我在樓頂看星星，我感覺很快樂。”迷惑的爸爸一下子就清楚了自己不快樂的原因了。 62
63 女孩的快樂如此簡單，卻是來自內心最真實的快樂。仔細體會，身邊的一草一木，一花一葉，都能帶給我們最純真的快樂。心中平靜喜悅，無論是仰望星空，還是低頭賞花，是臨水觀魚，還是聽風賞雨，都是其樂無窮。 64 </div>
65 </div>
66
67
68 <script type="text/javascript">
69 window.onload=function(){ 70 //自定義滾動條
71 var scroll=document.getElementById('scroll'); 72 var oDrag2=document.getElementById('drag2'); 73 var scrollCtrl=document.getElementById('scrollCtrl'); 74 var ctrlWords=document.getElementById('ctrlWords'); 75 var words=document.getElementById('words'); 76 oDrag2.onmousedown=function(ev){ 77 var oEvent=ev||event; 78 var pos=getMousePosition(oEvent); 79 var disX=pos.x-oDrag2.offsetLeft; 80 if(oDrag2.setCapture){ 81 //兼容IE7-11
82 oDrag2.onmousemove=Mousemove; 83 oDrag2.onmouseup=mouseUp; 84 oDrag2.setCapture(); 85 }else{ 86 //兼容FF,Chrome
87 document.onmousemove=Mousemove; 88 document.onmouseup=mouseUp; 89 } 90
91 function getMousePosition(ev){ 92 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 93 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 94 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}; 95 }; 96 //合並代碼
97 function Mousemove(ev){ 98 var oEvent=ev||event 99 var pis=getMousePosition(oEvent); 100 var l=pis.x-disX; 101
102 //3.限制范圍
103 if (l<0) { 104 l=0; 105 }else if(l>scroll.offsetWidth-oDrag2.offsetWidth){ 106 l=scroll.offsetWidth-oDrag2.offsetWidth; 107 } 108 oDrag2.style.left=l+'px'; 109 //百分數scale0-100%
110 var scale=l/(scroll.offsetWidth-oDrag2.offsetWidth);
111 scrollCtrl.style.filter='alpha(opacity:'+scale*100+')'; 112 scrollCtrl.style.opacity=scale; 113 words.style.top=-scale*(words.offsetHeight-ctrlWords.offsetHeight)+'px'; 114 }; 115 function mouseUp(){ 116 //當鼠標抬起時,mousemove/up清空
117 this.onmousemove=null; 118 this.onmouseup=null; 119 if (oDrag2.releaseCapture) { 120 oDrag2.releaseCapture(); 121 } 122 }; 123 return false; //FF中阻止默認行為
124 }; 125 } 126 </script>
127 </body>
128 </html>