您现在的位置： 365建站网 > 365文章 > javascript实现可拖动DIV层

javascript实现可拖动DIV层

文章来源：365jz.com 点击数：414 更新时间：2011-03-31 16:22 参与评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自由拖动的DIV层方块</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#draggable{
background-color:green;
font-size:9pt;
padding:30px;
color:white;
width:360px;
height:324px;
position:absolute;
}
</style>
<script type="text/javascript">
var rDrag = {

o:null,

init:function(o){
  o.onmousedown = this.start;
},
start:function(e){
  var o;
  e = rDrag.fixEvent(e);
               e.preventDefault && e.preventDefault();
               rDrag.o = o = this;
  o.x = e.clientX - rDrag.o.offsetLeft;
                o.y = e.clientY - rDrag.o.offsetTop;
  document.onmousemove = rDrag.move;
  document.onmouseup = rDrag.end;
},
move:function(e){
  e = rDrag.fixEvent(e);
  var oLeft,oTop;
  oLeft = e.clientX - rDrag.o.x;
  oTop = e.clientY - rDrag.o.y;
  rDrag.o.style.left = oLeft + 'px';
  rDrag.o.style.top = oTop + 'px';
},
end:function(e){
  e = rDrag.fixEvent(e);
  rDrag.o = document.onmousemove = document.onmouseup = null;
},
    fixEvent: function(e){
        if (!e) {
            e = window.event;
            e.target = e.srcElement;
            e.layerX = e.offsetX;
            e.layerY = e.offsetY;
        }
        return e;
    }
}
window.onload = function(){
        var obj = document.getElementById('draggable');
rDrag.init(obj);
}
</script>
</head>
<body>
<div id="draggable">这个可以拖动！</a><div style="background-color:red;height:300px;"></div></div>
</body>
</html>

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (414人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

大家感兴趣的内容

javascript实现可拖动DIV层

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询