关于div拖动解决方法

2013-02-24

关于div拖动本帖最后由 tomyu168 于 2013-02-02 21:20:58 编辑var rDrag {o:null,init:function(t){t.on

关于div拖动
本帖最后由 tomyu168 于 2013-02-02 21:20:58 编辑

var rDrag = {
 
 o:null,

 
 init:function(t){
  t.onmousedown = rDrag.start;    //这里rDrag.start或者this.start均可以，this表示当前对象rDrag，这一句意为obj按下调用start方法
//alert(o.id); 
 },
 start:function(e){
  var o;
  e = rDrag.fixEvent(e);     
   
   o= this;    
   rDrag.o=this;
   
  o.x = e.clientX - rDrag.o.offsetLeft;      //o.x 还是 o.a都可以，是不是成员变量的意思呢？
            //o.a为鼠标横坐标减去div与浏览器x轴距离，即鼠标到div边缘的横向距离
 
                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);
}


<!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,
 ox:null,
 oy:null,
 
 init:function(t){
  t.onmousedown = rDrag.start;    //这里rDrag.start或者this.start均可以，this表示当前对象rDrag，这一句意为obj按下调用start方法
//alert(o.id); 
 },
 start:function(e){
 // var o;
  e = rDrag.fixEvent(e);      //调用下面的浏览器兼容判别函数 
 
               e.preventDefault && e.preventDefault();   
   rDrag.o=this;
   
  ox = e.clientX - rDrag.o.offsetLeft;      //o.x 还是 o.a都可以，是不是成员变量的意思呢？
            //o.a为鼠标横坐标减去div与浏览器x轴距离，即鼠标到div边缘的横向距离
 
                oy = 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.ox;
  oTop = e.clientY - rDrag.oy;
  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>

诡异现象，这两段代码都是想完成拖动div的功能而第二个貌似在onmousedown之后，鼠标会自动跑到div的左上角，另外第一个的start函数中又var了一个o是为什么？貌似这里改成p或者其他名字就不行，（我修改为p后统一修改了成员变量，o.x>p.x o.y>p.y，但是依旧无效）求详解
[解决办法]

ox = 。。。
oy = 。。。
改成
rDrag.ox =
rDrag.oy =
试试


<!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,
 ox:null,
 oy:null,
  
 init:function(t){
  t.onmousedown = rDrag.start;    //这里rDrag.start或者this.start均可以，this表示当前对象rDrag，这一句意为obj按下调用start方法 
 
    //alert(o.id); 
 },
 start:function(e){
 // var o;
  e = rDrag.fixEvent(e);      //调用下面的浏览器兼容判别函数
               e.preventDefault && e.preventDefault();   
               rDrag.o=this;
                
  rDrag.ox = e.clientX - rDrag.o.offsetLeft;      //o.x 还是 o.a都可以，是不是成员变量的意思呢？
                                                //o.a为鼠标横坐标减去div与浏览器x轴距离，即鼠标到div边缘的横向距离
  
  rDrag.oy = 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.ox;
  oTop = e.clientY - rDrag.oy;
  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>

热点排行

JavaScript

关于div拖动解决方法