支持多浏览器的js拖拽 (转domkey0303 的blog)

it2022-05-09  58

只要将想拖拽的对象加到一个数组里,然后调用obj_DragAndDrap.draginit(Array)及可。

<html><head><style> <!-- .rob{width:200px;height:200px;background:#abcabc;border:2px;position:absolute;border-color:#666666} .child{width:200px;height:30px;background:#bad;border:1px;} --></style><script type="text/javascript">function $(id){     return document.getElementById(id); }var obj_DragAndDrap = new Object(); obj_DragAndDrap = {     top:0,     left:0,     dragedElement:null,     z_Index:0,     draglist:null,     dragstart:function(e){         var event = window.event || e;         if(event.srcElement){             obj_DragAndDrap.dragedElement = event.srcElement;         }else{             obj_DragAndDrap.dragedElement = event.target;         }         while(obj_DragAndDrap.tagName != "BODY"){             if(obj_DragAndDrap.isInArray(obj_DragAndDrap.draglist,obj_DragAndDrap.dragedElement)){                 break;             }else{                 obj_DragAndDrap.dragedElement = obj_DragAndDrap.dragedElement.parentNode;             }         }         obj_DragAndDrap.dragedElement.style.top = (obj_DragAndDrap.dragedElement.style.top)?obj_DragAndDrap.dragedElement.style.top : 0;         obj_DragAndDrap.dragedElement.style.left = (obj_DragAndDrap.dragedElement.style.left)?obj_DragAndDrap.dragedElement.style.left : 0;         obj_DragAndDrap.dragedElement.style.position = "absolute";         obj_DragAndDrap.top = parseInt(obj_DragAndDrap.dragedElement.style.top) - event.clientY;         obj_DragAndDrap.left = parseInt(obj_DragAndDrap.dragedElement.style.left) - event.clientX;         obj_DragAndDrap.dragedElement.style.zIndex = obj_DragAndDrap.z_Index+1;         obj_DragAndDrap.z_Index++;         obj_DragAndDrap.dragedElement.onmousemove = obj_DragAndDrap.draging;         obj_DragAndDrap.dragedElement.onmouseup = obj_DragAndDrap.dragend;         obj_DragAndDrap.dragedElement.onmouseout = obj_DragAndDrap.dragend;     },     draging:function(e){         var event = window.event || e;             obj_DragAndDrap.dragedElement.style.top = obj_DragAndDrap.top + event.clientY +"px";             obj_DragAndDrap.dragedElement.style.left = obj_DragAndDrap.left + event.clientX +"px";     },     dragend:function(e){         obj_DragAndDrap.dragedElement.onmousemove = obj_DragAndDrap.noDrag;         obj_DragAndDrap.dragedElement.onmouseup = obj_DragAndDrap.noDrag;         obj_DragAndDrap.dragedElement.onmouseout = obj_DragAndDrap.noDrag;         obj_DragAndDrap.top = 0;         obj_DragAndDrap.left = 0;     },     draginit:function(draglist){         try{             for(var i=0; i<draglist.length;i++){                 draglist[i].onmousedown = obj_DragAndDrap.dragstart;             }             obj_DragAndDrap.draglist = draglist;         }catch(exp){}     },     noDrag:function(){         return false;     },     isInArray:function(arr,ele){         for(var i=0 ; i < arr.length ; i++){             if(arr[i] == ele){                 return true;             }         }         return false;     } }function pageload(){     var dragment = document.getElementsByTagName("div");     var draglist = new Array();     for(var i=0;i<dragment.length;i++){             draglist.push(dragment[i]);     }     //draglist.push($("image"));    obj_DragAndDrap.draginit(draglist); }  </script></head><body onload="pageload()"><div id="father1" class="rob" style="left:0px;top:0px">     <div class="child"></div></div><div id="father2" class="rob" style="left:200px;top:0px">     <div class="child"></div></div><div><img id="image" src="http://photo8.yupoo.com/20070504/023058_781786965.jpg" unselectable="on" style="border:0px;" /></div></body></html>

转载于:https://www.cnblogs.com/Fly-sky/archive/2008/09/11/1289051.html

相关资源:js完美实现同时拖拽、旋转、放大缩小图片的手势操作 ver2 添加图片截取功能

最新回复(0)