做了一个简单的支持多浏览器的拖拽的例子，代码如下：
<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>
