//獲取相關(guān)CSS屬性 (兼容性考慮)
var getCss = function(o, key) {
    // getComputedStyle是為了兼容FF瀏覽器
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};

//拖拽的實(shí)現(xiàn) target 拖拽的控件 callback 回調(diào)方法
var startDrag = function(target, callback) {
    // 參數(shù)列表
    var params = {
        // position:relative left偏移值
        left: 0,
        // position:relative top偏移值
        top: 0,
        // 記錄鼠標(biāo)相對(duì)于視口的坐標(biāo)位置
        currentX: 0,
        currentY: 0,

        // 控件距離document頂部的距離 (包括滾動(dòng)卷起)
        rectLeft: 0,
        // 控件距離document左部的距離 (包括滾動(dòng)卷起)
        rectTop: 0,
        // 控件右邊距離視口右部距離
        rectRight: 0
    };

    // 如果該控件默認(rèn)是static定位(即沒有設(shè)置定位屬性) 此時(shí)只設(shè)置left和top屬性無法進(jìn)行偏移
    // 則將其定位屬性改成relative屬性, 相對(duì)于自身位置進(jìn)行位移
    if (getCss(target, "position") === "static") {
        target.style.position = "relative";
    }

    // 首先獲取目標(biāo)元素的left召耘、top屬性值
    if (getCss(target, "left") !== "auto") {
        params.left = getCss(target, "left");
    }
    if (getCss(target, "top") !== "auto") {
        params.top = getCss(target, "top");
    }
    // target.style.cursor="pointer";
    
    // 監(jiān)聽控件拖動(dòng)事件
    target.onmousedown = function(event) {
        // 記錄當(dāng)前的位置數(shù)據(jù)
        params.rectLeft = target.getBoundingClientRect().left + document.body.scrollLeft;
        params.rectTop = target.getBoundingClientRect().top + document.body.scrollTop;
        // params.rectTop = target.getBoundingClientRect().top;

        params.rectRight = document.documentElement.clientWidth - target.getBoundingClientRect().right;

        /*為了阻止拖動(dòng)瀏覽器中元素時(shí)發(fā)生默認(rèn)事件柏锄，
        例如拖動(dòng)圖片時(shí)會(huì)出現(xiàn)一個(gè)新窗口顯示該圖片糠亩，下面代碼可以阻止這種事件發(fā)生
        */
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        var e = event;
        // 記錄當(dāng)前鼠標(biāo)距離視口的坐標(biāo)x,y
        params.currentX = e.clientX;
        params.currentY = e.clientY;

        // 使用document的原因是 去除滑動(dòng)卡克的情況
        document.onmousemove = function(event) {
            var e = event ? event : window.event;
            // 獲取到當(dāng)前鼠標(biāo)的位置
            var nowX = e.clientX,
                nowY = e.clientY;
            // 獲取當(dāng)前鼠標(biāo)移動(dòng)的距離朽合，即當(dāng)前鼠標(biāo)位置減去初始位置
            var disX = nowX - params.currentX,
                disY = nowY - params.currentY;
            // 將元素的位置更新，parsenInt為了將屬性值變?yōu)閿?shù)字類型
            // console.log(disX, disY)
            // 往左移動(dòng)的距離大于 控件 距離左邊的距離
            if (disX < 0 && Math.abs(disX) > params.rectLeft) {
                disX = -params.rectLeft;
            }
            if (disY < 0 && Math.abs(disY) > params.rectTop) {
                disY = -params.rectTop;
            }
            // 往右移動(dòng)的距離大于邊界值
            if (disX > 0 && disX > params.rectRight) {
                disX = params.rectRight;
            }
            // console.log(params.rectLeft, params.rectTop, params.rectRight)
            target.style.left = parseInt(params.left) + disX + "px";
            target.style.top = parseInt(params.top) + disY + "px";
        } // end onmousemove

        // 防止鼠標(biāo)移出窗口的時(shí)候 回來的時(shí)候還可以移動(dòng)
        document.onmouseup = function() {
            // console.log('document mouseup')
            document.onmousemove = null;
            document.onmouseup = null;
            // params.flag = false;
            // 當(dāng)鼠標(biāo)松開時(shí)再次更新元素的位置 更新參數(shù)params
            if (getCss(target, "left") !== "auto") {
                params.left = getCss(target, "left");
            }
            if (getCss(target, "top") !== "auto") {
                params.top = getCss(target, "top");
            }
        }
    };

};

// 調(diào)用方法
startDrag(document.getElementsByTagName('div')[0])