js拖动

【Javascript】

下载

新闻

文章

js拖动div层的基本操作

<script> 
var x,y,z,down=false,obj    
document.onmousedown=function(){ 
obj=event.srcElement     //事件触发对象 
obj.setCapture()            //设置属于当前对象的鼠标捕捉 
z=obj.style.zIndex          //获取对象的z轴坐标值 
//设置对象的z轴坐标值为100，确保当前层显示在最前面 
obj.style.zIndex=100 
x=event.offsetX   //获取鼠标指针位置相对于触发事件的对象的X坐标 
y=event.offsetY   //获取鼠标指针位置相对于触发事件的对象的Y坐标 
down=true         //布尔值，判断鼠标是否已按下，true为按下，false为未按下 
} 

function moveit(){ 
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上 
 if(down&&event.srcElement==obj){ 
   with(obj.style){ 
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/ 

        posLeft=document.body.scrollLeft+event.x-x 
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/ 
        posTop=document.body.scrollTop+event.y-y 
   } 
 } 
} 

document.onmouseup = function(){ 
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false 
down=false  
obj.style.zIndex=z       //还原对象的Z轴坐标值 
obj.releaseCapture() //释放当前对象的鼠标捕捉 
}
//

</script>

<div onmousemove=moveit() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>
<div onmousemove=moveit() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div onmousemove=moveit() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>

不过以上不运行FF,以下的运行FF,IE

<div id="f" style="position: absolute; width: 200px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;">
        <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;"> 拖动层 </div>
    </div>
<script type="text/javascript">
var $=function (id){
var II=document.getElementById(id);
 if(!II){
 alert(id+" 控制对象不存在！") ;
 return false;
 }else{
return document.getElementById(id);
        }
}

var posX,posY;       
var fdiv = $("f");           
$("title").onmousedown=function(e)
{
    if(!e) e = window.event;
    posX = e.clientX - parseInt(fdiv.style.left);
    posY = e.clientY - parseInt(fdiv.style.top);
    document.onmousemove = mousemove;           
}
document.onmouseup = function(){document.onmousemove = null;}
function mousemove(ev)
{
    if(ev==null) ev = window.event;
    fdiv.style.left = (ev.clientX - posX) + "px";
    fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>