自己封装的一个原生JS拖动方法。

代码：

function drag(t,p){

    var point = p || null,
        target = t || null,
        resultX = 0,
        resultY = 0;

    (!point)? point = target : ''; //如果没有拖动点，则拖动点默认为整个别拖动元素

    function getPos(t){
        var offsetLeft = 0,
            offsetTop = 0,
            offsetParent = t;

        while(offsetParent){
            offsetLeft+=offsetParent.offsetLeft;
            offsetTop+=offsetParent.offsetTop;
            offsetParent = offsetParent.offsetParent;
        }

        return {'top':offsetTop,'left':offsetLeft};
    }

    function core(){

        var width = document.body.clientWidth || document.documentElement.clientWidth,
            height = document.body.clientHeight || document.documentElement.clientHeight; 
            maxWidth = width - target.offsetWidth,
            maxHeight = height - target.offsetHeight;

        (resultX >= maxWidth)?  target.style.left = maxWidth+'px' :  (resultX > 0)?target.style.left = resultX +'px': ''; //重置默认位置。
        (resultY >= maxHeight)?   target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默认位置。

        point.onmousedown=function(e){    
            var e = e || window.event,
                coordX = e.clientX,
                coordY = e.clientY,
                posX = getPos(target).left,
                posY = getPos(target).top;

            point.setCapture && point.setCapture();    //将Mouse事件锁定到指定元素上。
            document.onmousemove=function(e){

                var ev = e || window.event,
                    moveX = ev.clientX,
                    moveY = ev.clientY;

                resultX = moveX - (coordX - posX); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距
                resultY = moveY - (coordY - posY);

                (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px';  
                (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px'; 

                ev.stopPropagation && ev.stopPropagation(); 
                ev.preventDefault;
                ev.returnValue = false;
                ev.cancelBubble = true;
            };
        };
        document.onmouseup=function(){    // 解决拖动时，当鼠标指向的DOM对象非拖动点元素时，无法触发拖动点的onmousedown的BUG。
            document.onmousemove = null;    
            point.releaseCapture && point.releaseCapture();    // 将Mouse事件从指定元素上移除。
        };
        point.onmouseup=function(e){
            var e = e || window.event;
            document.onmousemove = null;
            point.releaseCapture && point.releaseCapture();
        };
    }
    core();
    window.onresize = core;    
}

使用方式：

drag(t,p)
/* 
 * 说明 
 * t 表示被拖动的元素
 * p 表示拖动点
*/

// 注意：如果省略拖动点，默认可拖动的区域是整个被拖动元素