js拖动

稿件来源: 太阳光网页设计   撰稿作者: 太阳光   发表日期: 2008-11-8 19:24:10   阅读次数: 483   查看权限: 游客查看

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>

关键词: js拖动div,javascript   编辑时间: 2010-3-12 9:20:17

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程