拖拽的元素必须绝对定位。
在实际操作中,犯了一个简单的错误:
对于iframe元素的事件绑定,需要在src完全加载后进行绑定。
iframe.onload = function(){
iframe.contentDocument.onclick = function(){}
...
}
另外,目前版本对于iframe的拖动有bug,不过可以通过在div中嵌套iframe来实现兼容。
1 var Drag = function(el,minX,maxX,minY,maxY){
2 // 拖拽元素
3 //el: 拖拽元素
4 //minX: X轴最小边界
5 //minY: Y轴最小边界
6 //maxX: X轴最大边界
7 //maxY: X轴最大边界
8 var self = this;
9 this.obj = el;
10 this.obj.minX = minX;
11 this.obj.minY = minY;
12 this.obj.maxX = maxX;
13 this.obj.maxY = maxY;
14
15 if(isNaN(Drag.getLocation(el).x))
16 this.obj.style.left = '0px';
17 if(isNaN(Drag.getLocation(el).y))
18 this.obj.style.top = '0px';
19 if(el.tagName.toLowerCase() == 'iframe'){
20 this.obj.contentDocument.onmousedown = function(e){
21 start.call(el,e);
22 Drag.fixEvent(e).stopPropagation()
23 };
24 }else{
25 this.obj.onmousedown = function(e){
26 start.call(el,e);
27 Drag.fixEvent(e).stopPropagation()
28 };
29 }
30
31 }
32 Drag.fixEvent = function(e){
33 e = e || window.event;
34 // 在此处,Chrome的layerX不正确,使用offsetX。
35 // 另外,无法修改事件对象的属性,只能另外添加
36 if(typeof e.layerX == "undefined" || e.layerX != e.offsetX ){
37 e.lX = e.offsetX;
38 e.lY = e.offsetY;
39 }else{
40 e.lX = e.layerX;
41 e.lY = e.layerY;
42 }
43 if(!e.pageX)
44 e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
45 if(!e.pageY)
46 e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;
47 if(!e.stopPropagation){
48 e.stopPropagation = function(){
49 e.cancelBubble = true;
50 }
51 }
52 if(!e.preventDefault){
53 e.preventDefault = function(){
54 e.returnValue = false;
55 }
56 }
57 return e;
58 };
59 Drag.getLocation = function(el){
60 var location = {},style;
61 if(window.getComputedStyle){
62 style = window.getComputedStyle(el,'');
63 location.x = parseInt(style.getPropertyValue('left'));
64 location.y = parseInt(style.getPropertyValue('top'));
65 }else{
66 style = el.currentStyle;
67 location.x = parseInt(style['left']);
68 location.y = parseInt(style['top']);
69 }
70 return location;
71 };
72
73 function start(e){
74 var self = this;
75 e = Drag.fixEvent(e);
76 this.inDOMLocation = {
77 x: e.lX,
78 y: e.lY
79 };
80 this.oldLocation = {
81 x: e.clientX,
82 y: e.clientY
83 };
84 //设定鼠标的移动范围
85 if(this.minX)
86 this.minMouseX = e.layerX + this.minX;
87 if(this.minY)
88 this.minMouseY = e.layerY + this.minY;
89 if(this.maxX)
90 this.maxMouseX = this.maxX - (this.offsetWidth - (parseInt(this.clientLeft) || 0) - e.lX)
91 if(this.maxY)
92 this.maxMouseY = this.maxY - (this.offsetHeight - (parseInt(this.clientTop) || 0) - e.lY)
93
94 if(this.tagName.toLowerCase() == 'iframe'){
95 this.contentDocument.onmousemove = function(e){
96 drag.call(self,e);
97 };
98 this.contentDocument.onmouseup = function(e){
99 stop.call(self,e);
100 };
101 }else{
102 this.onmousemove = function(e){
103 drag.call(self,e);
104 };
105 this.onmouseup = function(e){
106 stop.call(self,e);
107 };
108 }
109
110 }
111 function drag(e){
112 e = Drag.fixEvent(e);
113 var newLocation = {
114 x: e.clientX,
115 y: e.clientY
116 }, x,y;
117 x = newLocation.x;
118 y = newLocation.y;
119 if(this.minMouseX)
120 x = Math.max(this.minMouseX,newLocation.x)
121 if(this.minMouseY)
122 y = Math.max(this.minMouseY,newLocation.y)
123 if(this.maxMouseX)
124 x = Math.min(this.maxMouseX,x)
125 if(this.maxMouseY)
126 y = Math.min(this.maxMouseY,y)
127
128 this.style.left = Drag.getLocation(this).x + (x - this.oldLocation.x) + 'px';
129 this.style.top = Drag.getLocation(this).y + (y - this.oldLocation.y) + 'px';
130 this.oldLocation = {
131 x: x,
132 y: y
133 };
134 return;
135 }
136 function stop(){
137 this.oldLocation = null;
138 this.inDOMLocation = null;
139 if(this.tagName.toLowerCase() == 'iframe'){
140 this.contentDocument.onmouseup = this.contentDocument.onmousemove = null
141 }else{
142 this.onmouseup = this.onmousemove = null
143 }
144 }
使用也很简单,
Drag.init(document.getElementById('d'),20,500,30,500)