关于div拖动

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

解决方案 »

  1.   


     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>
      

  2.   

    http://theburningmonk.com/2011/03/drag-and-drop-using-reactive-extensions-for-javascript/