只要将想拖拽的对象加到一个数组里,然后调用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 添加图片截取功能