NO.29 【转载】拖放层效果

代码

< html >   
< head >< title > 拖动效果函数演示 by Longbill.cn </ title >   
< style >   
body   
{   
    font-size : 12px ;   
    color : #333333 ;   
    border  :  0px solid blue ;   
}   
div  
{   
    position  :  absolute ;   
    background-color  :  #c3d9ff ;   
    margin  :  0px ;   
    padding  :  5px ;   
    border  :  0px ;   
    width  :  100px ;   
    height : 100px ;   
}   
</ style >   
</ head >   
< body >   
< script >   
function  drag(o,s)  
{  
     if  ( typeof  o  ==   " string " ) o  =  document.getElementById(o);  
    o.orig_x  =  parseInt(o.style.left)  -  document.body.scrollLeft;  
    o.orig_y  =  parseInt(o.style.top)  -  document.body.scrollTop;  
    o.orig_index  =  o.style.zIndex;  
          
    o.onmousedown  =   function (a)  
    {  
         this .style.cursor  =   " move " ;  
         this .style.zIndex  =   10000 ;  
         var  d = document;  
         if ( ! a)a = window.event;  
         var  x  =  a.clientX + d.body.scrollLeft - o.offsetLeft;  
         var  y  =  a.clientY + d.body.scrollTop - o.offsetTop;  
         // author: www.longbill.cn  
        d.ondragstart  =   " return false; "   
        d.onselectstart  =   " return false; "   
        d.onselect  =   " document.selection.empty(); "   
                  
         if (o.setCapture)  
            o.setCapture();  
         else   if (window.captureEvents)  
            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);  

        d.onmousemove  =   function (a)  
        {  
             if ( ! a)a = window.event;  
            o.style.left  =  a.clientX + document.body.scrollLeft - x;  
            o.style.top  =  a.clientY + document.body.scrollTop - y;  
            o.orig_x  =  parseInt(o.style.left)  -  document.body.scrollLeft;  
            o.orig_y  =  parseInt(o.style.top)  -  document.body.scrollTop;  
        }  

        d.onmouseup  =   function ()  
        {  
             if (o.releaseCapture)  
                o.releaseCapture();  
             else   if (window.captureEvents)  
                window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);  
            d.onmousemove  =   null ;  
            d.onmouseup  =   null ;  
            d.ondragstart  =   null ;  
            d.onselectstart  =   null ;  
            d.onselect  =   null ;  
            o.style.cursor  =   " normal " ;  
            o.style.zIndex  =  o.orig_index;  
        }  
    }  
      
     if  (s)  
    {  
         var  orig_scroll  =  window.onscroll ? window.onscroll: function  (){};  
        window.onscroll  =   function  ()  
        {  
            orig_scroll();  
            o.style.left  =  o.orig_x  +  document.body.scrollLeft;  
            o.style.top  =  o.orig_y  +  document.body.scrollTop;  
        }  
    }  
}  
</ script >   

< div  id ="div1"  style ="left:10px;top:10px;" > div1:我可以被拖动 </ div >   
< div  id ="div2"  style ="left:120px;top:10px;background-color : #f3d9ff" > div2:来拖我呀 </ div >   
< div  id ="div3"  style ="left:230px;top:10px;background-color : #c3ffff" > div3:我随便你拖 </ div >   
< div  id ="div4"  style ="left:10px;top:120px;background-color : #c3d944" > div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看 </ div >   
< div  id ="div5"  style ="left:120px;top:120px;background-color : #f3d944" > 作者: Longbill
< a  href =http://www.longbill.cn  target =_blank > www.longbill.cn </ a >   
</ div >   
< div  id ="div6"  style ="left:230px;top:120px;background-color : #e3f944;width:200px;" > 参数说明:
  
drag(obj [,scroll]);
  
obj:对象的id或对象本身;
  
scroll(可选):对象是否随窗口拖动而滑动，默认为否
  
鼠标右键查看源代码  
</ div >   


< script >   
drag( " div1 " );  
drag( " div2 " );  
drag( " div3 " );  
drag( " div4 " , 1 );  
drag( " div5 " , 1 );  
drag( " div6 " , 1 );  


</ script >   

</ body >  

 

转载于:https://www.cnblogs.com/00fairy00/archive/2010/01/20/1652218.html