단순 드래그 실현
21003 단어 실현
실제 작업에서 간단한 오류가 발생했습니다.
iframe 요소의 이벤트 연결은 src가 완전히 불러온 후에 연결해야 합니다.
iframe.onload = function(){
iframe.contentDocument.onclick = function(){}
...
}또한 현재 버전은 iframe의 드래그에는 버그가 있지만 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)
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ReactRouter의 구현 방법즉, Hash 및 그 후의 문자는 서버에 전송되어 자원이나 데이터의 요청을 하지 않습니다.브라우저 동작을 지도하는 데 사용되며 서버에 효과가 없기 때문에 변경 URL 은 페이지를 다시 불러오지 않습니다.HTTP의 역...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
