js拖拽的例子

< 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 >