HTML5魔法堂：全面理解Drag & Drop API

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   

  在HTML4的时代，各前端工程师为了实现拖拽功能可说是煞费苦心，初听HTML5的DnD API觉得那些痛苦的日子将一去不复返，但事实又是怎样的呢？下面我们一起来看看DnD API的真面目吧！

 

二、由于篇幅较长，特设目录一陀　　　　　　　　　　　　　　　　　　　　　　

三、HTML4下实现简单拖拽

四、HTML5下实现简单拖拽

五、如何启用DnD效果

六、draggable属性详解

七、DnD的生命周期

八、DnD中最重要的数据传递对象──DataTransfer对象

九、[object DataTransferItemList]类型

十、[object DataTransferItem]类型

十一、浏览器支持

十二、特征检测是否支持HTML5的DnD API

十三、总结

十四、参考

十五、勘误

十六、书评

 

三、HTML4下实现简单拖拽　　　　　　　　　　　　　　　　　　　　　　　　　　

功能：实现在div#title上按下鼠标左键并移动鼠标时，拖拽整个div#dialog，但释放鼠标时停止拖拽。

html代码片断

<div id="dialog"> 
     <div id="title">
        Hi there!
     </div>
     <div id="content">
        Welcome here every one. We would learn the HTML5 feature DnD API now!
     <div>
</div>

js代码片断

DnD && DnD(document.getElementById('title'), document.getElementById('dialog'));

DnD.js工具库

;(function(exports, contains){
    var evtPrefix = '', 
        off = 'removeEventListener',
        on = 'addEventListener' in document  && 'addEventListener' || 
            (evtPrefix = 'on', off = 'detachEvent') && 'attachEvent'; 
    var docEl = document.documentElement, 
        body = document.body;

    var css = function(el, prop, expectedVal){
            var val;
            if (el.currentStyle){
                 val = el.currentStyle[prop];
            }
            else{
                val = window.getComputedStyle(el, null)[prop];
            }
            if (arguments.length === 3){
                if (typeof expectedVal === 'string')
                    return val === expectedVal;
                if (Object.prototype.toString.call(expectedVal) === '[object RegExp]')
                    return expectedVal.test(val);
                return false;
            }
            return val;
        };

    // 修正获取元素离页面左上角距离的bug
    var props = [['marginLeft', 'marginTop'], ['borderLeft', 'borderTop'], ['left', 'top']];
    var getOffsetXY = function(el){
            var oxy = {ox: el.offsetLeft, oy: el.offsetTop};
            if (el.offsetParent){
                var poxy = getOffsetXY(el.offsetParent);
                oxy = {ox: oxy.ox + poxy.ox, oy: oxy.oy + poxy.oy};
            }
            else if (css(el, 'position', /relative|absolute/i)){
                for (var i = 0, prop; prop = props[i++];){
                    oxy = {
                        ox: oxy.ox + (parseInt(css(el, prop[0])) || 0), 
                        oy: oxy.oy + (parseInt(css(el, prop[1])) || 0)
                    };
                }
            }
            return oxy;
        };
    var getPointXY = function(evt){
            if ('pageX' in evt){
                return {
                        x: evt.pageX,
                        y: evt.pageY
                    };
            }
            else{
                return {
                        x: evt.clientX + (docEl && docEl.scrollLeft || body && body.scrollLeft || 0) - (docEl && docEl.clientLeft || body && body.clientLeft || 0), 
                        y: evt.clientY + (docEl && docEl.scrollLeft || body && body.scrollTop || 0) - (docEl && docEl.clientLeft || body && body.clientTop || 0) 
                    };
            }
        };

    exports.DnD = function(dragEl, addedEl){
        if (!this instanceof DnD){
            return new DnD(dragEl, addedEl);
        }

        var dragEls = [];
        if (contains(dragEl, addedEl)){
            dragEls.push({
                el: dragEl,
                ox: 0,
                oy: 0
            });
        }
        else if (contains(addedEl, dragEl)){
            dragEls.push({
                el: addedEl,
                ox: 0,
                oy: 0
            });
        }
        else{
            dragEls = [{
                el: addedEl,
                ox: 0,
                oy: 0
            },{
                el: dragEl,
                ox: 0,
                oy: 0
            }];
        }
        var ox, oy;
        dragEl[on](evtPrefix + 'mousedown', function(evt){
            evt = evt || window.event;
            
            var pointXY = getPointXY(evt);
            ox = pointXY.x;
            oy = pointXY.y;
            
            for (var i = 0, currEl; currEl = dragEls[i++];){
                var oxy = getOffsetXY(currEl.el);
                currEl.ox = oxy.ox;
                currEl.oy = oxy.oy;
                currEl.el.style.position = 'absolute';
                currEl.el.style.left = currEl.ox + 'px';
                currEl.el.style.top = currEl.oy + 'px';
            }

            var onDOCMousemove = function(evt){
                evt = evt || window.event;
                var dx = evt.clientX - ox;
                var dy = evt.clientY - oy;
                for (var i = 0, currEl; currEl = dragEls[i++];){
                    currEl.el.style.left = (currEl.ox + dx) + 'px';
                    currEl.el.style.top = (currEl.oy + dy) + 'px';
                }
            };
            document[on](evtPrefix + 'mousemove', onDOCMousemove);
            document[on](evtPrefix + 'mouseup', function(evt){
                evt = evt || window.event;
                document[off](evtPrefix + 'mousemove', onDOCMousemove);
            });
        });
    };
}(window, window.contains));

View Code