<
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 >
只要将想拖拽的对象加到一个数组里,然后调用
obj_DragAndDrap.draginit(Array)及可。
< 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 >