实现层的拖动功能

字号：大 中 小

 

<div id="FrameLayer" onMouseDown="drag()" style="position:absolute; z-index:10000; cursor:hand; left:122px; top:48px; width:263px; height:151px; z-index:1; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000;">我可以移动哦哈哈</div>
<script>
var dragapproved=false; //鼠标是否按下的标志
var from_x=0;            //鼠标选择层时，鼠标的x坐标（相对于窗体）与层的右边距
var from_y=0;            //鼠标选择层时，鼠标的y坐标（相对于窗体）与层的上边距
var layer_width=263;
var layer_height=151;

function moveLayerTo(obj,x,y)
{
  document.getElementById(obj).style.left=x;
  document.getElementById(obj).style.top=y;
}
function DragTo()
{  
     if (dragapproved==true)
     {
    var x=event.x-from_x;
    var y=event.y-from_y;  
   
    var body_x=document.body.clientWidth-layer_width;
  
   
    if(x>body_x)
    {
    x=body_x;
    }
   
 
      
    moveLayerTo("FrameLayer",x,y);
   } 
}

function drag()
{
    var obj=document.getElementById("FrameLayer");
    var curr_x= parseInt(obj.style.left.split("p")[0]);
 var curr_y= parseInt(obj.style.top.split("p")[0]);
    from_x=event.x-curr_x;
 from_y=event.y-curr_y;
    
    dragapproved=true;
 obj.οnmοusemοve=DragTo; 
 if (document.all)
 { 
 document.οnmοuseup=new Function('dragapproved=false;')
 }
}</script>