您现在的位置: 365建站网 > 365学习 > javascript实现可拖动DIV层

javascript实现可拖动DIV层

文章来源:365jz.com     点击数:377    更新时间: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>

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


发表评论 (377人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------