全浏览器兼容的DIV拖动效果
生活随笔
收集整理的這篇文章主要介紹了
全浏览器兼容的DIV拖动效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
測(cè)試過(guò)下列瀏覽器
IE6、IE7、IE8、Chrome 5、FF 3.6、Opera 10、Safari 5
拖動(dòng)效果的腳本網(wǎng)上都有，但網(wǎng)上找到的腳本有個(gè)問(wèn)題
這是在網(wǎng)上隨便找的代碼(原出處不知道，很多類(lèi)似代碼的文章都沒(méi)寫(xiě)出處，實(shí)在不知道到底出至哪里...)
代碼 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 ?<html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script language="JavaScript" type="text/javascript">
6 function moveObj(obj) {
7 obj.style.cursor = "move";
8 obj.onmousedown = function(e) {
9 obj.style.position = "absolute";
10 var drag_x = 0;
11 var drag_y = 0;
12 var draging = true;
13 var left = obj.offsetLeft;
14 var top = obj.offsetTop;
15 if(typeof document.all !== "undefined") { //IE
16 ? drag_x = event.clientX;
17 drag_y = event.clientY
18 document.onmousemove = function(e) {
19 if(draging === false) return false;
20 obj.style.left = left + event.clientX - drag_x + "px";
21 obj.style.top = top + event.clientY - drag_y + "px"
22 }
23 } else { //FF,Chrome,Opera,Safari
24 ? drag_x = e.pageX;
25 drag_y = e.pageY;
26 document.onmousemove = function(e) {
27 if (draging === false) return false;
28 obj.style.left = left + e.pageX - drag_x + "px";
29 obj.style.top = top + e.pageY - drag_y + "px"
30 }
31 }
32 document.onmouseup = function() { draging = false; };
33 }
34 }
35 </script>
36 </head>
37 <body>
38 <div style="background-color:#cdf; width:200px;" onmouseover='moveObj(this)'>這個(gè)是可以拖動(dòng)的層1</div>
39 <div style="background-color:#fdc; width:200px;" onmouseover='moveObj(this)'>這個(gè)是可以拖動(dòng)的層2</div>
40 </body>
41 </html>
42
?
問(wèn)題1：拖動(dòng)的時(shí)候，其他內(nèi)容經(jīng)常會(huì)被反色(相當(dāng)于按住鼠標(biāo)左鍵，然后拖動(dòng)到有內(nèi)容的地方)
問(wèn)題2：在IE下拖動(dòng)后，內(nèi)容不可選了(整個(gè)頁(yè)面的內(nèi)容都不可選，我說(shuō)的不可選是說(shuō)無(wú)法用鼠標(biāo)選擇，如果你是用Ctrl+A的話，那肯定是可以的)
問(wèn)題1的解決方法就是在拖動(dòng)前屏蔽鼠標(biāo)選擇功能，問(wèn)題2理論上是和問(wèn)題1一樣，但是上面的代碼中，document.onmousemove和onmouseup并沒(méi)有注銷(xiāo)掉，所以在IE下，onmousemove事件導(dǎo)致拖動(dòng)后整個(gè)頁(yè)面內(nèi)容不可選了...
?
下面是我的代碼
代碼 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style type="text/css">
6 .mdiv {
7 width:200px;
8 height:30px;
9 line-height:30px;
10 text-align:center;
11 font-size:1em;
12 font-family:'宋體',Arial,Tahoma,sans-serif;
13 font-weight:bold;
14 }
15 </style>
16 <script language="JavaScript" type="text/javascript">
17 function moveObj(obj) {
18 obj.style.cursor = "move";
19 obj.onmousedown = function(e) {
20 obj.style.position = "absolute";
21 var top = obj.offsetTop;
22 var left = obj.offsetLeft;
23 var drag_x = document.all ? event.clientX : e.pageX;
24 var drag_y = document.all ? event.clientY : e.pageY;
25 var selection = disableSelection(document.body);
26 var move = function(e) {
27 obj.style.left = left + (document.all ? event.clientX : e.pageX) - drag_x + "px";
28 obj.style.top = top + (document.all ? event.clientY : e.pageY) - drag_y + "px";
29 };
30 var stop = function(e) {
31 removeEvent(document, "mousemove", move);
32 removeEvent(document, "mouseup", stop);
33 if(selection) {
34 selection();
35 delete selection;
36 }
37 };
38 addEvent(document, "mousemove", move);
39 addEvent(document, "mouseup", stop);
40 selection();
41 }
42 };
43
44 function addEvent(target, type, listener, capture) { return eventHandler(target, type, listener, true, capture); };
45
46 function removeEvent(target, type, listener, capture) { return eventHandler(target, type, listener, false, capture); };
47
48 function eventHandler(target, type, listener, add, capture) {
49 type = type.substring(0, 2) === "on" ? type.substring(2) : type;
50 if(document.all) {
51 add ? target.attachEvent("on"+type, listener) : target.detachEvent("on"+type, listener);
52 } else {
53 capture = (typeof capture === "undefined" ? true : (capture === "false" ? false : ((capture === "true") ? true : (capture ? true : false))));
54 add ? target.addEventListener(type, listener, capture) : target.removeEventListener(type, listener, capture);
55 }
56 };
57
58 function disableSelection(target) {
59 var disable = true;
60 var oCursor = document.all ? target.currentStyle["cursor"] : window.getComputedStyle(target, null).getPropertyValue("cursor");
61 var returnFalse = function(e) {
62 e.stopPropagation();
63 e.preventDefault();
64 return false;
65 };
66 var returnFalseIE = function() { return false; };
67 var selection = function() {
68 if(document.all) {
69 disable ? addEvent(target, "selectstart", returnFalseIE) : removeEvent(target, "selectstart", returnFalseIE);
70 } else {
71 disable ? addEvent(target, "mousedown", returnFalse, false) : removeEvent(target, "mousedown", returnFalse, false);
72 }
73 target.style.cursor = disable ? "default" : oCursor;
74 disable = !disable;
75 };
76 return selection;
77 };
78 </script>
79 </head>
80 <body>
81 <div class="mdiv" style="background-color:#cdf;" onmouseover='moveObj(this)'>這個(gè)是可以拖動(dòng)的層1</div>
82 <div class="mdiv" style="background-color:#fdc;" onmouseover='moveObj(this)'>這個(gè)是可以拖動(dòng)的層2</div>
83 <div>dfgkjsdkgjsjdf<br/>skdjfksjdflkjskdlf<br/></div>
84 </body>
85 </html>
?
加上屏蔽文本選擇的功能，并在document.onmouseup的時(shí)候把添加的事件監(jiān)聽(tīng)都注銷(xiāo)掉了
BTW，如果你是在DIV層的外圍，也就是慢慢移動(dòng)鼠標(biāo)，讓它剛好變?yōu)橐苿?dòng)樣式圖標(biāo)時(shí)，就開(kāi)始拖動(dòng)DIV，則很大幾率會(huì)出現(xiàn)內(nèi)容還是可選
此時(shí)你看鼠標(biāo)的圖標(biāo)，是默認(rèn)樣式，而不是移動(dòng)樣式...這...這我還真想不知道該怎么弄了...
不過(guò)好在這情況就只有在IE下才會(huì)出現(xiàn)(我上面測(cè)試的那幾個(gè)瀏覽器中，就只有IE系列會(huì)出現(xiàn)這問(wèn)題)
轉(zhuǎn)載于:https://www.cnblogs.com/consatan/archive/2010/10/11/1848158.html
總結(jié)
以上是生活随笔為你收集整理的全浏览器兼容的DIV拖动效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 百开头的成语有哪些？
- 下一篇： PowerShell 2.0 实践（十二