简单拖拽实现

时间:2022-05-04
本文章向大家介绍简单拖拽实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

拖拽的元素必须绝对定位。

在实际操作中,犯了一个简单的错误:

  对于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)