javascript的拖放入门

Posted on 2009-09-09 20:55 linFen 阅读(319) 评论(0) 收藏举报

现在我们的类就可以运作了，但正如你们所看到的那样，当鼠标拖动太快会出现鼠标移出div的情况。这是因为移动得越快，位移的距离就越大，拖动元素一下子从我们的鼠标溜走了，就无法调用mouseup事件。在IE中我们可以利用setCapture()来补救，但一旦某个元素调用setCapture()，文档中所有后续的鼠标事件都会在冒泡之前传到该元素，直到调用了releaseCapture()。换言之，在完成这些鼠标事件之前，它是不执行其他事件，一直占着线程，于是出现了我们的光标离开拖动元素的上方也能拖动元素的怪异现象。

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <style type="text/css">
            #drag {width:100px;height:100px;background:red;z-index:200;}
        </style>

</body>
</html>

你在拖动块上点一下，然后再到拖动块外面点一下，就可以实现"隔空拖动"的神奇效果了！(当然只限IE)

由于鼠标事件一直接着线程，所以在我们不用的时候，一定要releaseCapture()来解放它。

在firefox中我们可以使用window.captureEvents()，火狐说这方法已经废弃，但我怎么在各标准浏览器中运作良好呢？！不过不管怎么样，来来回回要设置捕获与取消捕获非常麻烦与吃内存，我们需要转换思路。因为如果鼠标离开拖动元素上方，我们的绑定函数就无法运作，要是把它们绑定在document上呢，鼠标就无论在何处都能监听拖动元素。但触发拖动的onmousedown事件我们还保留在拖动元素上，这事件不会因为不执行就引起差错之虞。不过，由于绑定对象一变，我们要在这些事件中获得拖动对象的引用的难度就陡然加大，这里我就直接把它们做成构造函数内的私有函数吧。

var Drag = function(id){ 
  var el = document.getElementById(id); 
  el.style.position = "absolute";     
  var drag = function(e) { 
    e = e || window.event; 
    el.style.cursor = "pointer"; 
    !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges(); 
    el.style.left = e.clientX - el.offset_x  + "px"; 
    el.style.top = e.clientY - el.offset_y  + "px"; 
    el.innerHTML = parseInt(el.style.left,10)+ "X"+parseInt(el.style.top,10); 
  } 
   
  var dragend = function(){ 
    document.onmouseup = null; 
    document.onmousemove = null; 
  } 
    
  var dragstart = function(e){ 
    e = e || window.event; 
    el.offset_x = e.clientX - el.offsetLeft; 
    el.offset_y = e.clientY - el.offsetTop; 
    document.onmouseup = dragend; 
    document.onmousemove = drag; 
    return false; 
  } 
  el.onmousedown = dragstart; 
}

window.onload = function(){
    new Drag("drag");
  };
        </script>
        <title>Drag and Drop</title>
    </head>
    <body>
        <p>拖动时可能被选中的文本……………………</p>
        <div id="drag"></div>
        <table class="filement_table">
            <thead>
                <tr>
                    <th>nodeType</th>
                    <th>
                    </th>
                    <th>
                        nodeName
                    </th>
                    <th>
                        nodeValue
                    </th>
                    <th>
                        attributes
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Element</td>
                    <td>tagName大写</td>
                    <td>null</td>
                    <td>NamedNodeMap</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Attr</td>
                    <td>name of attribute小写</td>
                    <td>value of attribute</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Text</td>
                    <td>#text</td>
                    <td>content of the text node</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>CDATASection</td>
                    <td>#cdata-section</td>
                    <td>content of the CDATA Section</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>EntityReference</td>
                    <td>name of entity referenced</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Entity</td>
                    <td>entity name</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>ProcessingInstruction</td>
                    <td>target</td>
                    <td>entire content excluding the target</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Comment</td>
                    <td>#comment</td>
                    <td>content of the comment</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Document</td>
                    <td>#document</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>DocumentType</td>
                    <td>document type name</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>DocumentFragment</td>
                    <td>#document-fragment</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>Notation</td>
                    <td>notation name</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
            </tbody>
        </table>

</body>
</html>

进一步改进，不使用mouseup事件，这样就减少了错过mouseup事件带来的鼠标粘着卡壳的问题。但由于标准浏览器不会自动切换e.button和e.which的值，我被迫动用一个功能键Shirt来停止鼠标拖拽。

var Drag = function(id){ 
  var el = document.getElementById(id); 
  el.style.position = "absolute"; 
  var drag = function(e){ 
    var e = e || window.event, 
    button = e.button || e.which; 
    if(button == 1 && e.shiftKey == false){ 
      el.style.cursor = "pointer"; 
        !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges(); 
      el.style.left = e.clientX - el.offset_x  + "px"; 
      el.style.top = e.clientY - el.offset_y  + "px"; 
      el.innerHTML = parseInt(el.style.left,10)+ " x "+parseInt(el.style.top,10); 
    }else { 
      document.onmousemove = null; 
    } 
  } 
  var dragstart = function(e){ 
    e = e || window.event; 
    el.offset_x = e.clientX - el.offsetLeft; 
    el.offset_y = e.clientY - el.offsetTop; 
    el.style.zIndex = ++Drag.z; 
    document.onmousemove = drag; 
    return false; 
  } 
  Drag.z = 999; 
  el.onmousedown = dragstart; 
}

var dragstart = function(e){
                    e = e || window.event;
                    el.offset_x = e.clientX - el.offsetLeft;
                    el.offset_y = e.clientY - el.offsetTop;

el.style.zIndex = ++Drag.z;
                    document.onmousemove = drag;
                    return false;
                }
                Drag.z = 999;
                el.onmousedown = dragstart;
            }

window.onload = function(){
                new Drag("drag1");
                new Drag("drag2");
                new Drag("drag3");
                new Drag("drag4");

};
        </script>
        <title>Drag and Drop</title>
    </head>
    <body>
        //将拖动的距离加到原来的top与left上，以实现位移
        <p>拖动时可能被选中的文本……………………</p>

<table class="filement_table">
            <thead>
                <tr>
                    <th>nodeType</th>
                    <th>
                    </th>
                    <th>
                        nodeName
                    </th>
                    <th>
                        nodeValue
                    </th>
                    <th>
                        attributes
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Element</td>
                    <td>tagName大写</td>
                    <td>null</td>
                    <td>NamedNodeMap</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Attr</td>
                    <td>name of attribute小写</td>
                    <td>value of attribute</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Text</td>
                    <td>#text</td>
                    <td>content of the text node</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>CDATASection</td>
                    <td>#cdata-section</td>
                    <td>content of the CDATA Section</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>EntityReference</td>
                    <td>name of entity referenced</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Entity</td>
                    <td>entity name</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>ProcessingInstruction</td>
                    <td>target</td>
                    <td>entire content excluding the target</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Comment</td>
                    <td>#comment</td>
                    <td>content of the comment</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Document</td>
                    <td>#document</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>DocumentType</td>
                    <td>document type name</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>DocumentFragment</td>
                    <td>#document-fragment</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>Notation</td>
                    <td>notation name</td>
                    <td>null</td>
                    <td>null</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

虽然不绑定mouseup的确在IE爽到high起，但在火狐等浏览要多按一个键才能终止拖动，怎么说也对用户体验造成影响，因此当一种知识学学就算了。我们还是选择方案2。

接着下来我们为方案扩展一下功能。首先范围拖动，就是存在一个让它在上面拖动的容器。如果存在容器，我们就取得其容器的四个点的坐标，与拖动元素的四个点的坐标比较，从而修正top与left。由于我已经实现了getCoords函数，取得页面上某一点的坐标易如反掌。同时这样做，我们就不用把此容器设置成offsetParent。总之，多一事不如少一事。

var getCoords = function(el){ 
  var box = el.getBoundingClientRect(), 
  doc = el.ownerDocument, 
  body = doc.body, 
  html = doc.documentElement, 
  clientTop = html.clientTop || body.clientTop || 0, 
  clientLeft = html.clientLeft || body.clientLeft || 0, 
  top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop, 
  left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft 
  return { 'top': top, 'left': left }; 
};

接着我们要取得容器的四个点的坐标：

_cCoords = getCoords(container), 
_cLeft = _cCoords.left, 
_cTop = _cCoords.top, 
_cRight = _cLeft + container.clientWidth, 
_cBottom = _cTop + container.clientHeight;

接着是拖动元素的四个点的坐标：

var _left = el.offsetLeft, 
_top = el.offsetTop, 
_right = _left + el.offsetWidth, 
_bottom = _top + el.offsetHeight,

但是这样取得的是没有拖动前的坐标，拖动时的坐标在上面的方案2也已给出了：

1.var _left = e.clientX - el.offset_x, 
2._top = e.clientY - el.offset_y,

修正坐标很简单，如果拖动元素在左边或上边超出容器，就让拖动元素的top与left取容器的_cLeft或_cTop值，如果从右边超出容器，我们用_cRight减去容器的宽度再赋给拖动元素的top，下边的处理相仿。

if(_left < _cLeft){ 
  _left = _cLeft 
} 
if(_top < _cTop){ 
  _top = _cTop 
} 
if(_right > _cRight){ 
  _left = _cRight - el.offsetWidth; 
} 
if(_bottom > _cBottom){ 
  _top = _cBottom - el.offsetHeight; 
} 
el.style.left = _left  + "px"; 
el.style.top = _top  + "px";

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <style type="text/css">
            .drag {width:100px;height:100px;z-index:200;}
            #drag1 {background:red}
            #drag2 {background:#E8D098;}
            #drag3 {background:#fff;}
            #drag4 {background:#E8FFE8;}
            #drag5 {background:#ff0;}
            #drag6 {background:#66c;}
            #parent {width:300px;height:300px;background:blue;}
        </style>
        <script type="text/javascript">
            var getCoords = function(el){
                var box = el.getBoundingClientRect(),
                doc = el.ownerDocument,
                body = doc.body,
                html = doc.documentElement,
                clientTop = html.clientTop || body.clientTop || 0,
                clientLeft = html.clientLeft || body.clientLeft || 0,
                top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
                left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
                return { 'top': top, 'left': left };
            };
            var Drag = function(id){
                var el = document.getElementById(id),
                options  = arguments[1] || {},
                container = options.container || document.documentElement,
                limit = false || options.limit;
                el.style.position = "absolute";
                var drag = function(e) {
                    e = e || window.event;
                    el.style.cursor = "pointer";
                        !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
                    var _left = e.clientX - el.offset_x,
                    _top = e.clientY - el.offset_y;
                    if(limit){
                        var _right = _left + el.offsetWidth,
                        _bottom = _top + el.offsetHeight,
                        _cCoords = getCoords(container),
                        _cLeft = _cCoords.left,
                        _cTop = _cCoords.top,
                        _cRight = _cLeft + container.clientWidth,
                        _cBottom = _cTop + container.clientHeight;
                        if(_left < _cLeft){
                            _left = _cLeft
                        }
                        if(_top < _cTop){
                            _top = _cTop
                        }
                        if(_right > _cRight){
                            _left = _cRight - el.offsetWidth;
                        }
                        if(_bottom > _cBottom){
                            _top = _cBottom - el.offsetHeight;
                        }
                    }
                    el.style.left = _left  + "px";
                    el.style.top = _top  + "px";
                    el.innerHTML = parseInt(el.style.left,10)+ " x "+parseInt(el.style.top,10);
                }

var dragend = function(){
                    document.onmouseup = null;
                    document.onmousemove = null;
                }

var dragstart = function(e){
                    e = e || window.event;
                    el.offset_x = e.clientX - el.offsetLeft;
                    el.offset_y = e.clientY - el.offsetTop;
                    document.onmouseup = dragend;
                    document.onmousemove = drag;
                    el.style.zIndex = ++Drag.z;
                    return false;
                }
                Drag.z = 999;
                el.onmousedown = dragstart;
            }

</body>
</html>

水平锁定与垂直锁直也是两个很常用的功能，我们也来实现它。原理很简单，在开始拖动时就把top与left保存起来，待到拖动时再赋给它就行了。代码请直接看运行框的代码：

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <style type="text/css">
            .drag {width:100px;height:100px;z-index:200;}
            #drag1 {background:red}
            #drag2 {background:#E8D098;}
            #drag3 {background:#fff;}
            #drag4 {background:#E8FFE8;}
            #drag5 {background:#ff0;}
            #drag6 {background:#66c;}
            #parent {width:300px;height:300px;background:blue;}
        </style>
        <script type="text/javascript">
            var getCoords = function(el){
                var box = el.getBoundingClientRect(),
                doc = el.ownerDocument,
                body = doc.body,
                html = doc.documentElement,
                clientTop = html.clientTop || body.clientTop || 0,
                clientLeft = html.clientLeft || body.clientLeft || 0,
                top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
                left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
                return { 'top': top, 'left': left };
            };
            var Drag = function(id){
                var el = document.getElementById(id),
                options  = arguments[1] || {},
                container = options.container || document.documentElement,
                limit = false || options.limit,
                lockX = false || options.lockX,
                lockY = false || options.lockY;
                el.style.position = "absolute";
                var drag = function(e) {
                    e = e || window.event;
                    el.style.cursor = "pointer";
                        !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
                    var _left = e.clientX - el.offset_x,
                    _top = e.clientY - el.offset_y;
                    if(limit){
                        var _right = _left + el.offsetWidth,
                        _bottom = _top + el.offsetHeight,
                        _cCoords = getCoords(container),
                        _cLeft = _cCoords.left,
                        _cTop = _cCoords.top,
                        _cRight = _cLeft + container.clientWidth,
                        _cBottom = _cTop + container.clientHeight;
                        _left = Math.max(_left, _cLeft);
                        _top = Math.max(_top, _cTop);
                        if(_right > _cRight){
                            _left = _cRight - el.offsetWidth;
                        }
                        if(_bottom > _cBottom){
                            _top = _cBottom - el.offsetHeight;
                        }
                    }
                    if(lockX){
                        _left = el.lockX;
                    }
                    if(lockY){
                        _top = el.lockY;
                    }
                    el.style.left = _left  + "px";
                    el.style.top = _top  + "px";
                    el.innerHTML = parseInt(el.style.left,10)+ " x "+parseInt(el.style.top,10);
                }

var dragend = function(){
                    document.onmouseup = null;
                    document.onmousemove = null;
                }

刷新页面返回顶部

luluping

公告

javascript的拖放入门