drag drop中的的错位和边界问题

改成“absolute"后，需要获得元素的绝对位置。
var getAbsolutePos = function(el){
   var d = /^div$/i.test(el.tagName),l = el.scrollLeft,t = el.scrollTop;
   var L = d && l?l:0, T = d && t?t:0, r = [e1.offsetLeft - L，el.offsetTop - T];
   if(el.offsetParent){
       var p = getAbsolutePos(el.offsetParent);
       r[0]+= p[0];r[1]+=p[1];
   }
   return r;
}
将：
 this.dx = parseInt(this.handle.style.left + 0) - e.clientX;
 this.dy = parseInt(this.handle.style.top  + 0) - e.clientY;
改为：
 var absp = getAbsolutePos(this.handle);
 this.dx = absp[0]- e.clientX;
 this.dy = absp[1]- e.clientY;

解决方案 »

  1.   

    我照你这么一改，不知道为什么，反道更错位了。<html>
    <head>
    <title>Page Title</title>
    <style>.drag {
        cursor: move;
    } .box {
        margin: 0px;
        width: 200px;
        border: 1px solid #ccc;
    }
    .box h3.title {
        margin: 0px;
        width: 100%;
        background-color: #ccc;
    }
    .box div.content {
        margin: 0px;
        width: 100%;
        text-align: left;
    }
    </style><script type="text/javascript">
    var   getAbsolutePos   =   function(el){ 
          var   d   =   /^div$/i.test(el.tagName),l   =   el.scrollLeft,t   =   el.scrollTop; 
          var   L   =   d   &&   l?l:0,   T   =   d   &&   t?t:0,   r   =   [el.offsetLeft - L,el.offsetTop   -   T]; 
          if(el.offsetParent){ 
                  var   p   =   getAbsolutePos(el.offsetParent); 
                  r[0]+=   p[0];r[1]+=p[1]; 
          } 
          return   r; 
    } 
    //GreatGhoul
    //兼容ff, ie
    //要拖动的对象的title设置为'dragable'
    //拖动点的class设置为'drag'，拖动点必须为可拖动对象的子节点var DragableObj = {
        handle: null,
        dx: 0,
        dy: 0,    init: function(e) {
            e = e || event;
            this.handle = e.target || e.srcElement;
            if (this.handle.className.indexOf('drag') == -1) return;
            //这句不知道谁写的，真他妈好用！
            while (this.handle.tagName != 'HTML' && this.handle.title != "dragable") {
                this.handle = this.handle.parentNode || this.handle.parentElement;
            }
            if (this.handle.title != 'dragable') return;
    　　　　　//如果改为absolute，点击例2后会出现错位，怎么解决。
            this.handle.style.position = 'absolute';
      var   absp   =   getAbsolutePos(this.handle); 
      this.dx   =   absp[0]-   e.clientX; 
      this.dy   =   absp[1]-   e.clientY;         document.onmousemove = DragableObj.drag;
        },
        drag: function(e) {
            e = e || event;
            if (this.handle != null) {
                this.handle.style.left = (e.clientX + this.dx) + 'px';
                this.handle.style.top  = (e.clientY + this.dy) + 'px';
            }
        },
        drop: function(e) {
            this.handle = null;
            document.onmousemove = null;
        }
    };
    document.onmousedown = DragableObj.init;
    document.onmouseup   = DragableObj.drop;
    document.onselectstart = function(e) {
        e = e || event;
        eo = e.target || event.srcElement;
        if (eo.className.indexOf('drag') != -1) return false;
    };</script>
    </head>
    <body>
    <br>例１：
    <div class="box" title="dragable">
    <h3 class="drag title">title</h3>
    <div class="content">fdsaffdsafdsafdsafds</div>
    </div><br>例２：
    <div class="drag" title="dragable">拖动我</div></body>
    </html>
      

  2.   

    将<br>例X 改为 <div><br>例X</div>后，会解决可拖拽元素的错位问题。但“例2”还是会移动位置。
    我尚不知道你的设计意图。但在一个“功能块”中，1、最好全部绝对定位或者全部相对定位。2、所有元素，包括TITLE 都应该包含在一个HTML标签中（div 或者 span)。根据你的需要，可以设计一套CSS，让这些元素绝对定位，再修正布局位置，也许可以解决你的问题。但绝对定位后，计算元素位置必须取得绝对位置，用那个getAbsolutePos方法应该没什么问题。
      

  3.   

    你的第二个问题：如何限制拖动在一定的范围，其实很简单：
    this.dx = this.dx > maxX?maxX:this.dx<minX?minX:this.dx;
    this.dy = this.dy > maxY?maxY:this.dy<minY?minY:this.dy;
      

  4.   

    第二个问给lz个思路
    这个难点在于临界点的处理
    例如当左边界到达临界线时，除了停止拖动，建议把div往右移到容器范围内一点
    不然div会定在临界线不动
    这个可能需要方向的判断应该可以做出来还有就是注意offset和left这些属性
    由于offset是包括边框等整个div的长（宽）度的
    所以在临界线的定位和移动上要注意一点