摘要：獲取下一個元素節(jié)點，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個元素節(jié)點為選擇中，調(diào)用運(yùn)動框架實現(xiàn)動畫，添加定時器，調(diào)用該函數(shù)，實現(xiàn)自動播放。移出時，開啟定時器，繼續(xù)輪播。輪播間隔時間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。

轉(zhuǎn)載自我的個人博客
歡迎大家批評指正

包括5部分：

小練習(xí)1-處理用戶輸入

小練習(xí)2-日期對象的使用

小練習(xí)3：輪播圖

小練習(xí)4：輸入提示框

小練習(xí)5：界面拖拽交互

源碼地址
task0002 在線Demo

這里直接可以利用原來寫過的util.js。所以應(yīng)該不是特別難。主要考察對字符串的操作，以及正則表達(dá)式的使用

在task0002目錄下創(chuàng)建一個task0002_1.html文件，以及一個js目錄和css目錄，在js目錄中創(chuàng)建task0002_1.js，并將之前寫的util.js也拷貝到js目錄下。然后完成以下需求。

在頁面中，有一個單行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，允許用戶用半角逗號來作為不同愛好的分隔。

當(dāng)點擊按鈕時，把用戶輸入的興趣愛好，按照上面所說的分隔符分開后保存到一個數(shù)組，過濾掉空的、重復(fù)的愛好，在按鈕下方創(chuàng)建一個段落顯示處理后的愛好。

實現(xiàn)

根據(jù)題目要求，這個地方比較簡單，可以直接利用前面寫過的一些函數(shù)，分成四步，進(jìn)行。

使用正則表達(dá)式來對字符串進(jìn)行分割操作。

uniqArray函數(shù)進(jìn)行去重操作。

for循環(huán)，trim函數(shù)對數(shù)組項進(jìn)行去除首尾空格，用來處理，該項為空的情況。

innerHTML進(jìn)行輸出。

html：

提交

task0002_1.js中的js:

//自執(zhí)行的匿名函數(shù)
(function handle_1() {
    //其實這里沒必要使用id因為數(shù)據(jù)那么少$函數(shù)直接獲取標(biāo)簽就行
    var inp = $("#user_input");
    var out = $("#user_output");
    $.click("#btn", function () {
        var value = inp.value.split(/,|，/); //1.根據(jù)半角逗號分割成數(shù)組。
        var unValue = uniqArray(value); //2.數(shù)組去重
        for (var i = 0, len = unValue.length; i < len; i++) {
            var trimValue = trim(unValue[i]); //3.對每一項進(jìn)行去除首尾空格操作
            console.log(trimValue);
            if (trimValue !== "") { //4.只有在去除首尾空格后不為空的數(shù)組才輸出。
                out.innerHTML += "
" + trimValue + "
"
            }
        }
    })
})();

單行變成多行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，允許用戶用換行、空格（全角/半角）、逗號（全角/半角）、頓號、分號來作為不同愛好的分隔。

當(dāng)點擊按鈕時的行為同上

實現(xiàn)

看題目描述，主要是對于第一步進(jìn)行修改，第一階段只要求對半角逗號進(jìn)行處理，但是在第二階段中，需要對“換行、空格（全角/半角）、逗號（全角/半角）、頓號、分號”進(jìn)行處理。
主要是考察對于正則表達(dá)式的應(yīng)用。

只需要對var value = inp.value.split(/,|，/); 進(jìn)行更改如下：

var value = inp.value.split(/ |s+|,|，|、|;|；/);
需要注意的是：在正則表達(dá)式進(jìn)行匹配這些符號時最好是前面加上轉(zhuǎn)義字符。

用戶輸入的愛好數(shù)量不能超過10個，也不能什么都不輸入。當(dāng)發(fā)生異常時，在按鈕上方顯示一段紅色的錯誤提示文字，并且不繼續(xù)執(zhí)行后面的行為；當(dāng)輸入正確時，提示文字消失。

同時，當(dāng)點擊按鈕時，不再是輸出到一個段落，而是每一個愛好輸出成為一個checkbox，愛好內(nèi)容作為checkbox的label。

實現(xiàn)

嗯，其實這里按照題目要求應(yīng)該要實時監(jiān)聽輸入值變化，但是那樣太麻煩了，，所以就直接在點擊按鈕的時候判斷了。

直接判斷數(shù)組長度就行了。。輸入為空時，判斷字符串=“”。

輸出checkbox這里不過多的設(shè)置了，只是演示。

html:

處理并輸出
輸入的愛好數(shù)量不能超過10個，或什么都不輸入

js:

(function handle_1() {
    var inp = $("#user_input");
    var out = $("#user_output");
    $.click("#btn", function () {
        var value = inp.value.split(/
|s+|,|，|、|;|；/); //分割成數(shù)組。
        var unValue = uniqArray(value); //數(shù)組去重
        var i = 0;
        var len = unValue.length;
        if (len > 10 || unValue == "") {
            $("p").style.disautoPlay = "block";
        } else {
            $("p").style.disautoPlay = "none";
            for (; i < len; i++) {
                var trimValue = trim(unValue[i]); //對每一項進(jìn)行去除首尾空格操作
                console.log(trimValue);
                if (trimValue !== "") { //只有在去除首尾空格后不為空的數(shù)組才輸出。
                    out.innerHTML += "" + "" + trimValue + ""
                }
            }
        }
    })
})();

在線演示：小練習(xí)1：處理興趣列表

在和上一任務(wù)同一目錄下面創(chuàng)建一個task0002_2.html文件，在js目錄中創(chuàng)建task0002_2.js，并在其中編碼，實現(xiàn)一個倒計時功能。

界面首先有一個文本輸入框，允許按照特定的格式YYYY-MM-DD輸入年月日；

輸入框旁有一個按鈕，點擊按鈕后，計算當(dāng)前距離輸入的日期的00:00:00有多少時間差

在頁面中顯示，距離YYYY年MM月DD日還有XX天XX小時XX分XX秒

每一秒鐘更新倒計時上顯示的數(shù)

如果時差為0，則倒計時停止

這里主要是考察的對于日期對象的使用。

new Date()。如果沒有輸入任何參數(shù)，則Date的構(gòu)造器會依據(jù)系統(tǒng)設(shè)置的當(dāng)前時間來創(chuàng)建一個Date對象。表示當(dāng)前系統(tǒng)時間。

//時間對象創(chuàng)建的幾種方式。
var today = new Date();
var birthday = new Date("December 17, 1995 03:24:00");
var birthday = new Date("1995-12-17T03:24:00");
var birthday = new Date(1995,11,17);
var birthday = new Date(1995,11,17,3,24,0);

Date對象中處理時間和日期的常用方法：詳細(xì)內(nèi)容在MDN上

創(chuàng)建時間處理函數(shù)，使用正則表達(dá)式，處理輸入的值，value.match(/(^d{4})-(d{2})-(d{2}$)/);用到了match方法和正則的分組，在我寫的正則博客里應(yīng)該有過詳細(xì)介紹了。這里也不過的說明了。

使用目標(biāo)時間的getTime()毫秒數(shù)減去得到當(dāng)前的毫秒數(shù)，得到相差的毫秒數(shù)。處理它：（注意毫秒的問題）

(60 * 60 * 24) ：剩余的天數(shù)。

(60 * 60) % 24) :剩余的小時數(shù)。依次類推。

innerHTML輸出，并且判斷相差時間，改變輸出的值。

定時器的使用。(我這里使用的setTimeout()，使用遞歸調(diào)用實現(xiàn)自執(zhí)行)

計時器setTimeout(函數(shù),延遲時間);，在載入后延遲指定時間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次。

取消計時器:clearTimeout()停止計時器。

給按鈕添加點擊事件，在點擊時，調(diào)用剛剛編寫的的時間處理函數(shù)。

在線演示：小練習(xí)2：倒計時

在和上一任務(wù)同一目錄下面創(chuàng)建一個task0002_3.html文件，在js目錄中創(chuàng)建task0002_3.js，并在其中編碼，實現(xiàn)一個輪播圖的功能。

圖片數(shù)量及URL均在HTML中寫好

可以配置輪播的順序（正序、逆序）、是否循環(huán)、間隔時長

圖片切換的動畫要流暢

在輪播圖下方自動生成對應(yīng)圖片的小點，點擊小點，輪播圖自動動畫切換到對應(yīng)的圖片

效果示例：http://echarts.baidu.com/ 上面的輪播圖（不需要做左右兩個箭頭）

主要是對于考察對于定時器，以及事件綁定的處理，以及動畫效果，為此我專門寫了一篇博客《JS完美運(yùn)動框架的封裝過程》。 這里就直接使用里面封裝好的函數(shù)了。
本來都要放棄組件的編寫了，只想按照常規(guī)方法來寫個輪播圖就好，但是在先把小練習(xí)4完成的情況下，就發(fā)現(xiàn)了一種新方法，可以幫助我完成這個任務(wù)（強(qiáng)烈建議先看小練習(xí)四?。┦褂?b>nextElementNode,圖片向左切換。（不涉及任何css，我假設(shè)css都會了，也沒有用到特別難css屬性）

該輪播圖有依賴函數(shù)。主要使用到以下函數(shù)：

選擇器函數(shù)$(class);

運(yùn)動框架startMove。

同時在該函數(shù)引入時，還依賴于獲取實際樣式函數(shù)getStyle。

獲取當(dāng)前元素在同級元素的索引getIndex;

事件代理函數(shù)：delegateEvent。

添加class與刪除class元素addClass、romoveClass。

編寫幻燈片函數(shù)：Slideshow(element)。

根據(jù)圖片的數(shù)量創(chuàng)建與圖片數(shù)量相同的導(dǎo)航小點：ul>li*length 。設(shè)置其li樣式，并且默認(rèn)把第一個li設(shè)置為活動狀態(tài)className為active。

編寫點擊函數(shù)clickLi：

給li添加事件代理函數(shù)。

據(jù)點擊的li的索引值算出來動畫的目標(biāo)值，-iCurrent * getIndex(this);

移除所有li上的選中狀態(tài)active：編寫函數(shù)removeLiClass()，在后面我們還要用到它。

設(shè)置當(dāng)前點擊的li為選中：狀態(tài)active

調(diào)用運(yùn)動框架實現(xiàn)動畫效果。

function Slideshow(element) {
    //1.創(chuàng)建li
    var imgArr = element.getElementsByTagName("img"); //獲取圖片數(shù)量
    var imgArrLen = imgArr.length; //緩存圖片數(shù)量
    var createUl = document.createElement("ul"); //創(chuàng)建小點的ul
    var iCurrent = parseInt(getStyle(imgArr[0], "width")); //獲取一張圖片的寬度
    element.style.width = iCurrent * imgArrLen + "px"; //設(shè)置圖片容器的寬度。
    //創(chuàng)建li
    for (var i = 0, len = imgArrLen; i < len; i++) {
        createUl.innerHTML += "
";
    }
    element.parentNode.appendChild(createUl); //插入導(dǎo)航
    addClass(createUl, "Slideshow-nav"); //添加導(dǎo)航樣式
    addClass(createUl.getElementsByTagName("li")[0], "active"); //默認(rèn)設(shè)置第一個為第當(dāng)前活動的li
    
    //編寫點擊函數(shù)clickLi： 
    clickLi();
    /**
     * 點擊導(dǎo)航
     */
    function clickLi() {
        delegateEvent(createUl, "li", "click", function () {
            var iTaget = -iCurrent * getIndex(this);
            removeLiClass();
            addClass(this, "active"); //移出
            startMove(element, {
                "left": iTaget
            });
        });
    }
    
    /**
    * 用于移除所有的Li的選中狀態(tài)：active
    */
    function removeLiClass() {
        var oLi = createUl.getElementsByTagName("li");
        for (var i = 0, len = oLi.length; i < len; i++) {
            removeClass(oLi[i], "active");
        }
    }
}

為了方便后續(xù)的封裝，暫時只考慮：正序，不循環(huán)的情況！

創(chuàng)建自動播放函數(shù)paly（）,獲取當(dāng)前為選中狀態(tài)active的li.

設(shè)置目標(biāo)值，根據(jù)選中狀態(tài)的索引+1 *width來設(shè)置。（注意是負(fù)值，同時考慮索引值+1為length的情況。）

因為不循環(huán)，需要在設(shè)置(getIndex(heightLi)+1)===imgArrLen-1清除定時器。(其實就是輪播到最后的時候，至于為什么是這樣，可以自己研究一下，更改一下值。)

獲取下一個元素節(jié)點，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個元素節(jié)點為選擇中，調(diào)用運(yùn)動框架！實現(xiàn)動畫，

添加定時器setInterval()，調(diào)用該函數(shù)，實現(xiàn)自動播放。

測試幾次，你會發(fā)現(xiàn)：點擊li和自動播放之間存在沖突，動畫效果都沒做完就播放下一張了，如何解決呢？

給圖片容器添加一個鼠標(biāo)移入和移除事件（mouseover、mouseover）也就是hover上去的效果

移入時，清除定時器，暫停播放。

移出時，開啟定時器，繼續(xù)輪播。

然后你會發(fā)現(xiàn)問題成功的解決了?。ǘ椅矣^察了大部分的輪播，都是這個效果，移入暫停，移出繼續(xù))

這里我們的最基本的功能都實現(xiàn)了，代碼如下：(放在Slideshow()函數(shù)內(nèi)部)

var iSpeed = 4000;//定時器間隔。

hoverElement(); 
/*
* 移入圖片容器暫停，移除繼續(xù)播放。
*/
function hoverElement() {
    addEvent(element.parentNode, "mouseover", function () {
        clearInterval(timer);
    });
    addEvent(element.parentNode, "mouseout", function () {
        timer = setInterval(autoPlay, iSpeed);
    });
}

var timer = null;
timer = setInterval(autoPlay, iSpeed);
/*
* 自動播放函數(shù)。
*/
function autoPlay() {
    var heightLi = $(".Slideshow-nav .active"); //高亮的li
    var iTaget;
    iTaget = (getIndex(heightLi) + 1) === imgArrLen ? 0 : (-iCurrent * (getIndex(heightLi) + 1));

    if (getIndex(heightLi) + 1 === imgArrLen - 1) {
        clearInterval(timer);
    }
    var nextLi = heightLi.nextElementSibling;
    if (nextLi) {
        removeLiClass();
        addClass(nextLi, "active");
    }
    startMove(element, {
        "left": iTaget
    });
}

獲取題目要求：主要是以下三點。

是否循環(huán)，默認(rèn)為循環(huán)。

是否反向，默認(rèn)不反向。只有循環(huán)時，才可反向。

輪播間隔時間，默認(rèn)4000。

如何實現(xiàn)？（使用JSON如下：）

/*
 * @param {JSON}         option       配置項
 *   @config   {String}  noLoop       不循環(huán)？，默認(rèn)為循環(huán)，只要存在則不循環(huán)，任意值
 *   @config   {String}  reverse      是否反向，任意值。只有“noLoop”不存在時，也就是只有循環(huán)時，才執(zhí)行。
 *   @config   {Number}  intervalTime 輪播間隔時間（單位為毫秒），默認(rèn)為4000，
*/

在Slideshow()內(nèi)部，以下部分進(jìn)行修改或添加。

先從簡單的開始吧！判斷option.intervalTime是否存在并且更改iSpeed的值（這樣，輪播間隔時間配置就成功了），默認(rèn)為4000毫秒。

改變自動播放（一）：autoPlay函數(shù)。這里是整個改造中最復(fù)雜的部分！分幾步進(jìn)行。

把剛剛寫的autoPlay函數(shù)內(nèi)的內(nèi)容，除去var heightLi = $(".Slideshow-nav .active"); 、var iTaget;這兩個內(nèi)容，其他的都使用if(option.noLoop){}包裹起來。
這樣就又完成了一個內(nèi)容，當(dāng)配置為不循環(huán)時的情況，就寫好了。

既然有if不循環(huán)的情況,那么就肯定有else對應(yīng)循環(huán)時的情況對吧?（笑）那么在里面應(yīng)該怎么做呢？

第一次練習(xí)時，可以不添加函數(shù)，直接使用if else,對應(yīng)正向與反向的情況！但是，在這里為了后面的進(jìn)化，且不過多的闡述，就直接使用使用函數(shù)了，就叫他play(reverse)吧。
在這里當(dāng)然傳入的參數(shù)是option.reverse，

改變自動播放（二）：編寫play(reverse)。

第一要務(wù)就是加入if eles啦，用來區(qū)分，true時為反向，false為正向（默認(rèn)）。

先來說正向的情況！其實特別簡單，有兩步：

第一步：刪除(getIndex(heightLi)+1)===imgArrLen-1清除定時器的部分，只有這樣才能實現(xiàn)循環(huán)，

第二步：在上面被提取到不循環(huán)的內(nèi)容中(也就是第一版的autoPlay())的if (nextLi)部分加上else的情況就行了！

//在下一個元素節(jié)點不存在的情況下（也就是到了最后了），設(shè)置第一個節(jié)點為活動狀態(tài)，就這樣正向的循環(huán)就成功了！
 else {
    removeLiClass();
    addClass($(".Slideshow-nav li"), "active");
}

反向的情況(只需要對正向循環(huán)進(jìn)行修改)：

改變目標(biāo)值iTaget。getIndex(heightLi) === 0 ? -iCurrent * (imgArrLen - 1) : -iCurrent * (getIndex(heightLi) - 1);

改變下一個元素節(jié)點，為前一個元素節(jié)點previousElementSibling。

改變上面else的情況，為設(shè)置最后一個節(jié)點為活動狀態(tài)。代碼就不貼了，有興趣的看源碼吧!

到現(xiàn)在函數(shù)就修改完成了。只需要在循環(huán)的情況下，調(diào)用該函數(shù)，并且傳入option.reverse。

其實到這里我們題目要求就完成了！

但是！不挑戰(zhàn)一下怎么能行？

為什么不把左右點擊切換一起實現(xiàn)了呢？

既然這樣，我們就繼續(xù)吧！

創(chuàng)建并設(shè)置箭頭樣式(配合css使用)

//創(chuàng)建左右導(dǎo)航
var createSpan = document.createElement("div");
addClass(createSpan, "left-right")
createSpan.innerHTML = "<>"
element.parentNode.appendChild(createSpan);

創(chuàng)建點擊事件，事件代理。

炸裂的函數(shù)調(diào)用。

還記得我們剛剛的play(reverse)函數(shù)嗎？剛剛的功能完全不用封裝函數(shù)，那為什么要做呢？就是這里啦！

想想剛剛的函數(shù)實現(xiàn)了什么功能呢？是不是正向循環(huán)，和反向循環(huán)？，自動播放是因為在外層有定時器的緣故。

所以只需要調(diào)用傳參就行了！

傳什么參數(shù)？

想想左右箭頭的索引，是不是0和1。這樣就懂了吧！

對索引進(jìn)行取反。傳參！代碼如下：

delegateEvent(createSpan, "span", "click", function () {
    var heightLi = $(".Slideshow-nav .active"); //高亮的待選li
    var leftIndex = !getIndex(this); //點擊左時為true，點擊又為false
    //移動的目標(biāo)值，默認(rèn)正向
    play(leftIndex);
});

至此，我們的輪播圖組件就完成了！ 需要配合CSS使用。 通過這次封裝，收益良多，感興趣的話可以看看源碼

在線演示：小練習(xí)3：圖片輪播組件

在和上一任務(wù)同一目錄下面創(chuàng)建一個task0002_4.html文件，在js目錄中創(chuàng)建task0002_4.js，并在其中編碼，實現(xiàn)一個類似百度搜索框的輸入提示的功能。

要求如下：

允許使用鼠標(biāo)點擊選中提示欄中的某個選項

允許使用鍵盤上下鍵來選中提示欄中的某個選項，回車確認(rèn)選中

選中后，提示內(nèi)容變更到輸入框中

初級班：

不要求和后端交互，可以自己偽造一份提示數(shù)據(jù)例如：

var suggestData = ["Simon", "Erik", "Kener"];

中級班：

自己搭建一個后端Server，使用Ajax來獲取提示數(shù)據(jù)

示例：

這里我并沒有一開始就直接進(jìn)行數(shù)據(jù)獲取的部分，而是進(jìn)行了任務(wù)分解，如下：

先在使用寫好的ul>li標(biāo)簽下，。添加3個事件mouseover、mouseout、click。實現(xiàn)點擊li使其值變成輸入框內(nèi)的值。（直接使用事件代理）

對輸入框添加鍵盤事件（對，你沒看錯，只有在聚焦在輸入框時才觸發(fā)）

獲取當(dāng)前高亮的li。沒有則設(shè)第一個為高亮active。

判斷keyCode使用鍵盤下鍵,使用nextElementSibling方法獲取下一個節(jié)點（向上同理）,取消當(dāng)前的active，設(shè)置下一個為active。（使用鍵盤上下選中的效果,處理完成）

判斷keyCode，獲取當(dāng)前狀態(tài)為active的值，實現(xiàn)回車時，把其設(shè)為input的值。

需要注意的地方：

在移除高亮狀態(tài)時，最好是遍歷一遍。因為鍵盤與鼠標(biāo)劃過有可能同時觸發(fā)，導(dǎo)致有多個高亮。

錯誤處理

刪除原來的ul>lihtml部分的li。添加對于輸入框進(jìn)行實時監(jiān)聽（這部分不在這里展開講，如何實現(xiàn)大家去google吧，因為一展開就太多要說的了）。

給個參考：實時監(jiān)聽輸入框值變化

使用AJAX獲取服務(wù)器上的數(shù)據(jù)，解析，遍歷，并進(jìn)行數(shù)據(jù)匹配。

匹配成功顯示ul，否則設(shè)為none。

使用正則表達(dá)式的match方法，來獲取匹配成功的把部分，使用span進(jìn)行高亮顯示。并且插入ul

改造第一階段的函數(shù)：

因為是使用的事件代理，直接對ul添加事件，所以需要修改的部分不是很多。

click和enter部分獲取的值，因為span標(biāo)簽的存在，需要使用正則進(jìn)行處理，輸出刪除span后的值。

在線演示：小練習(xí)4：輸入框即時提示

實現(xiàn)一個可拖拽交互的界面

如示例圖，左右兩側(cè)各有一個容器，里面的選項可以通過拖拽來左右移動

被選擇拖拽的容器在拖拽過程后，在原容器中消失，跟隨鼠標(biāo)移動

注意拖拽釋放后，要添加到準(zhǔn)確的位置

拖拽到什么位置認(rèn)為是可以添加到新容器的規(guī)則自己定

注意交互中良好的用戶體驗和使用引導(dǎo)

開一個DEMO頁面，實踐如下：

了解應(yīng)該用到的事件，onmousedown、onmousemove、onmouseup。

思考對誰添加事件?

在鼠標(biāo)點擊div時，對div添加onmousedown,表示鼠標(biāo)按下。

在事件內(nèi)給document添加onmousemove。（為啥給document加呢？因為給div加在移動過快時會跳出去）表示鼠標(biāo)移動。

并且添加document添加onmouseup，表示鼠標(biāo)已經(jīng)抬起，清除移動事件，以及本身。

思考如何設(shè)置對象的位置？

直接獲取鼠標(biāo)的位置并設(shè)置給div行不行呢？試試吧！顯然，會出現(xiàn)問題，點擊鼠標(biāo)就到div左上角去了。

那么怎么改變呢？獲取鼠標(biāo)在div中的位置？對。就這樣，在鼠標(biāo)按下時記錄鼠標(biāo)在div中的位置.

在鼠標(biāo)移動時，用當(dāng)前的位置，減去剛剛的位置，這就是應(yīng)該的值！

別忘了鼠標(biāo)抬起時，需要清除事件，不然鼠標(biāo)就粘住了。

這里用到了event,事件對象的相關(guān)概念，推薦觀看慕課網(wǎng)的視頻。DOM事件探秘

善用this。
擴(kuò)展

/**
 * 鼠標(biāo)拖拽函數(shù)。
 * @param {HTMLElement} element 需要拖拽的對象
 */
function setDrag(element) {
    addEvent(element, "mousedown", onmousedown);
    //鼠標(biāo)按下
    function onmousedown(ev) {
        var oEvent = ev || event;
        var disX = oEvent.clientX - this.offsetLeft;
        var disY = oEvent.clientY - this.offsetTop;
        var that = this;
        addEvent(document, "mousemove", onmousemove);
        addEvent(document, "mouseup", onmouseup);
        /**
         * 鼠標(biāo)移動
         */
        function onmousemove(ev) {
            var oEvent = ev || event;
            that.style.left = oEvent.clientX - disX + "px";
            that.style.top = oEvent.clientY - disY + "px"
        }
        /**
         * 鼠標(biāo)抬起刪除事件
         */
        function onmouseup() {
            removeEvent(document, "mousemove", onmousemove);
            removeEvent(document, "mouseup", onmouseup);
        }
    }
}

兩個參數(shù)，第一個參數(shù)，傳入父級對象。第二個參數(shù)傳入標(biāo)簽名，

循環(huán)，使用數(shù)組，對象，獲取標(biāo)簽當(dāng)前元素的位置left，top。（offsetLeft）。這里不能使用獲取實際樣式函數(shù)，因為本身就需要獲取其相對父元素的位置。

第二個循環(huán)

設(shè)置left，top值。

設(shè)置絕對定位。

取消原有的margin值。

調(diào)用函數(shù)，把對象從文檔流布局，變成絕對定位布局。

/**
 * 布局轉(zhuǎn)換函數(shù)
 * @param {HTMLElment} element  HTML對象
 * @param {string}     childEle 其內(nèi)需要轉(zhuǎn)換的標(biāo)簽名
 */
function toPosition(element, childEle) {
    var eleArr = element.getElementsByTagName(childEle);
    var aPos = [];
    //
    for (var i = 0, len = eleArr.length; i < len; i++) {
        aPos[i] = {
            left: eleArr[i].offsetLeft,
            top: eleArr[i].offsetTop
        };
    }
    for (var i = 0, len = eleArr.length; i < len; i++) {
        eleArr[i].style.left = aPos[i].left + "px";
        eleArr[i].style.top = aPos[i].top + "px";
        eleArr[i].style.position = "absolute";
        eleArr[i].style.margin = "0";
    }
}

在線演示：小練習(xí)5：拖拽交互

前面我們已經(jīng)實現(xiàn)了setDrag(element)函數(shù)，常規(guī)方法就是直使用循環(huán)，然后傳入element。

但是，為什么不用事件代理呢？

特別簡單，只需要對上面寫的函數(shù)進(jìn)行一些簡單的改裝。

delegateEvent(parentElement, "li", "mousedown", function (ev) {
//此處是原函數(shù)中的內(nèi)容。
}

現(xiàn)在知道為什么上面的函數(shù)會用到this了吧？

先來看張圖：

是不是有瞬間豁然開朗的感覺呢？

獲取相關(guān)值，只需要考慮不碰不上的情況就行了！。如下：

/**
 * 碰撞檢測函數(shù)
 * @param   {object}  obj1 對象1
 * @param   {object}  obj2 對象2
 * @returns {boolean} 碰撞時返回true，否則反正false
 */
function hitDetection(obj1, obj2) {
    //對象1的相關(guān)值
    var l1 = obj1.offsetLeft;
    var r1 = obj1.offsetLeft + obj1.offsetWidth;
    var t1 = obj1.offsetTop;
    var b1 = obj1.offsetTop + obj1.offsetHeight;
    //對象2的相關(guān)值
    var l2 = obj2.offsetLeft;
    var r2 = obj2.offsetLeft + obj2.offsetWidth;
    var t2 = obj2.offsetTop;
    var b2 = obj2.offsetTop + obj2.offsetHeight;

    if (r1 < l1 || l1 > r2 || b1 < t2 || t1 > b2) {
        return false;//沒碰上
    } else {
        return true;
    }
}

這里講起來就太復(fù)雜了。源代碼中注釋還是比較詳細(xì)的，有興趣可以看下