您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > javascript實現(xiàn)可拖動DIV層

javascript實現(xiàn)可拖動DIV層

文章來源：365jz.com 點擊數(shù)：433 更新時間：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>