全浏览器兼容的DIV拖动效果

测试过下列浏览器

IE6、IE7、IE8、Chrome 5、FF 3.6、Opera 10、Safari 5

拖动效果的脚本网上都有，但网上找到的脚本有个问题

这是在网上随便找的代码(原出处不知道，很多类似代码的文章都没写出处，实在不知道到底出至哪里...)

代码

问题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系列会出现这问题)

转载于:https://www.cnblogs.com/consatan/archive/2010/10/11/1848158.html

全浏览器兼容的DIV拖动效果相关推荐

jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
php网页悬浮对联代码,不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: .r1{width:80px;height:80px;backgroun ...
沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果.这种想起来很简单做起来很麻烦的事情今天你有好方案了. --不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列 ...
最全的CSS浏览器兼容问题（转至http://68design.net/Web-Guide/HTMLCSS/37154-1.html）
最全的CSS浏览器兼容问题 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2 ...
【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
转载 Div+css浏览器兼容实例分析（一）
为什么80%的码农都做不了架构师?>>> 今天又在OECP社区发现了一篇好文章,<Div+css浏览器兼容实例分析>,因为文章太长所以分为两篇上传给大家分享. 用d ...
HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() we ...
div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...)
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
DIV+CSS浏览器兼容问题
IE6能识别*和_,但不能识别 !important, IE7能识别*,也能识别!important,不能识别_; FF不能识别*和_,能识别!important; 所以可以这样来区分IE6,IE7, ...

全浏览器兼容的DIV拖动效果

全浏览器兼容的DIV拖动效果相关推荐

最新文章

热门文章