全浏览器兼容的DIV拖动效果
时间：2010-10-11 来源：consatan
测试过下列浏览器
IE6、IE7、IE8、Chrome 5、FF 3.6、Opera 10、Safari 5
拖动效果的脚本网上都有，但网上找到的脚本有个问题
这是在网上随便找的代码(原出处不知道，很多类似代码的文章都没写出处，实在不知道到底出至哪里...)
代码
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)'>这个是可以拖动的层1</div>
39 <div style="background-color:#fdc; width:200px;" onmouseover='moveObj(this)'>这个是可以拖动的层2</div>
40 </body>
41 </html>
42
问题1：拖动的时候，其他内容经常会被反色(相当于按住鼠标左键，然后拖动到有内容的地方)
问题2：在IE下拖动后，内容不可选了(整个页面的内容都不可选，我说的不可选是说无法用鼠标选择，如果你是用Ctrl+A的话，那肯定是可以的)
问题1的解决方法就是在拖动前屏蔽鼠标选择功能，问题2理论上是和问题1一样，但是上面的代码中，document.onmousemove和onmouseup并没有注销掉，所以在IE下，onmousemove事件导致拖动后整个页面内容不可选了...
下面是我的代码
代码
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)'>这个是可以拖动的层1</div>
82 <div class="mdiv" style="background-color:#fdc;" onmouseover='moveObj(this)'>这个是可以拖动的层2</div>
83 <div>dfgkjsdkgjsjdf<br/>skdjfksjdflkjskdlf<br/></div>
84 </body>
85 </html>
加上屏蔽文本选择的功能，并在document.onmouseup的时候把添加的事件监听都注销掉了
BTW，如果你是在DIV层的外围，也就是慢慢移动鼠标，让它刚好变为移动样式图标时，就开始拖动DIV，则很大几率会出现内容还是可选
此时你看鼠标的图标，是默认样式，而不是移动样式...这...这我还真想不知道该怎么弄了...
不过好在这情况就只有在IE下才会出现(我上面测试的那几个浏览器中，就只有IE系列会出现这问题)
相关阅读 更多 +
