js 拖拽排序 ！

　　　　　　　　　　　　　　　　 前言

現在做頁面的經常會有用到拖拽的東西 ,我一直用的都是jquery的一些插件，但知其然，不知其所以然不是我想要的。起碼對於經常會用到的東西還是盡可能多去了解點，所以就百度百度，書翻幾下。想着自己也試着寫個可以拖拽並自動排列的例子，起碼了解一下。

輔助js（主要是簡化document.getElement(id) 這些的寫法）

如下代碼：（可略過不看 代碼最后會提供下載，並且不關拖拽具體實現）

 

(function (window) {
    var regId = /^#[\w\-]+$/,
    regCls = /^.[\w\-]+$/,
    //從園子里某位前輩那里看來的（有點時間了 忘記在哪）， Array.prototype.slice.call是把一個偽數組變為數組，具體百度
    p_silice = Array.prototype.slice,  
    p_push = Array.prototype.push,
    markArr = function (obj) {
        return p_silice.call(obj, 0);
    };
    function MWood(selector) {
        return new MWood.prototype.init(selector);
    };

    function MWood(selector, context) {
        return new MWood.prototype.init(selector, context);
    }

    MWood.prototype = {
        init: function (selector) {
            if (regId.test(selector)) {
                this.length = 1;
                this[0] = document.getElementById(selector);
                return this;
            }
            else if (regCls.test(selector)) {
                if (document.querySelectorAll) {
                    p_push.apply(this, markArr(document.querySelectorAll(selector)));
                } else {
                    var len = documenet.getElementsByTagName('*').length,
                    clsArr = [],
                    el, i = 0,
                    selector = selector.replace(/\-/g, "\\-");
                    var oRegExp = new RegExp("(^|\\s)" + selector + "(\\s|$)");

                    for (; i < len; i++) {
                        el = els[i];
                        if (oRegExp.test(el[type])) {
                            clsArr.push(el);
                        }
                    }

                    pro_push.apply(this, markArr(clsArr));
                    return this;
                }
            }
        },
        length: 0
    }

    MWood.prototype.init.prototype = MWood.prototype;

    MWood.extend = function (obj) {
        for (var o in obj) {
            this[o] = obj[o];
        }
    }

    MWood.extend({
        addHandle: function (elm, type, fn) {
            if (elm.addEventListener) {
                elm.addEventListener(type, fn, false);
            }
            else if (el.attachEvent) {
                elm.attachEvent("on" + type, fn);
            } else {
                elm["on" + type] = fn;
            }
        },
        removeHandle: function (elm, type, fn) {
            if (elm.removeEventListener) {
                elm.removeEventListener(type, fn, false);
            }
            else if (el.detachEvent) {
                elm.detachEvent("on" + type, fn);
            } else {
                elm["on" + type] = null;
            }
        },
        getEvent: function (evnet) {
            return evnet ? evnet : window.evnet;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        }
    });

    window.MWood = MWood;

})(this);

 

拖拽js

 

window.onload = function () {
    var dragDrop = function () {
        var dragInfo = {};   //存放有關拖拽對象的一些信息
        function handleEvent(event) {
            e = MWood.getEvent(event);  //獲得事件
            var target = MWood.getTarget(event); //獲得事件對象
            switch (event.type) {   //判斷事件類型
                case "mousedown":
                    if (target.className.indexOf("droggle") > -1) {
                        dragInfo.dObj = target;   //存放事件對象
                        var tlwh = getObjtlwh(target); //獲得對象的 offsetTop,offsetLeft,offsetWidth,offsetHeight
                        //計算出鼠標的坐標與對象offsetTop,offsetLeft的差值以便於鼠標移動時實時定位拖拽對象的位置
                        target.x = e.clientX - tlwh[1];
                        target.y = e.clientY - tlwh[0];

                        //修改對象的position以便可以設置left和top進行拖拽 從這里開始此對象已經脫離文檔流
                        //何為文檔流 當怎么樣設置position或別的設置會脫離文檔流請百度
                        target.style.position = "absolute";

                        //設置拖拽對象的left top width height
                        target.style.left = tlwh[1] + "px";
                        target.style.top = tlwh[0] + "px";
                        target.style.width = tlwh[2] + "px";
                        target.style.height = tlwh[3] + "px";

                        //建立一個新對象填補被拖拽對象的位置，這樣頁面就還會按現在的排版，不會有任何更改。
                        //如果沒創建，被拖拽對象的位置就會被文檔流上的其他對象占用，文章最后提供代碼，可以注釋掉下面4句試下兩種情況
                        dragInfo.vObj = document.createElement("div");
                        dragInfo.vObj.style.width = target.style.width;
                        dragInfo.vObj.style.height = target.style.height;
                        target.parentNode.insertBefore(dragInfo.vObj, target);
                    }
                    break;
                case "mousemove":
                    if (dragInfo.dObj) {  //當鼠標移動的時候判斷時候已經有對象存在（對象會在mousedown的時候存放進這個變量里）
                        //設置拖拽對象的left和top改變位置，因為position已經在mousedown的時候改變為absolute了（鼠標坐標-保存的差值）
                        dragInfo.dObj.style.left = (e.clientX - dragInfo.dObj.x) + "px";
                        dragInfo.dObj.style.top = (e.clientY - dragInfo.dObj.y) + "px";

                        //獲取class為droggle的一組HTMl對象.Array.prototype.slice.call是給一個偽數組轉為真正的數組用的,MWood(".droggle")就是取得class為droggle的一組對象
                        var arr = Array.prototype.slice.call(MWood(".droggle"), 0);

                        //循環對象
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] === dragInfo.dObj)  //過濾拖拽對象
                                continue;
                            var tlwh = getObjtlwh(arr[i]); //獲得對象的 offsetTop,offsetLeft,offsetWidth,offsetHeight

                            //下面就主要是判斷鼠標的位置是否為引起頁面上各HTML元素在頁面上位置的替換
                            //判斷鼠標x > 對比對象offsetLeft && x < （對比對象的offsetWidth + 對象對象offsetLef）。 鼠標的坐標y同理鼠標坐標x的判斷
                            //判斷位置變換也可以按自己的標准來，我百度的時候看到例子里是這樣判斷我就直接像他那樣寫了
                            if (e.x > tlwh[1] && e.x < (tlwh[1] + tlwh[2]) && e.y > tlwh[0] && e.y < (tlwh[0] + tlwh[3])) {
                                if (e.y < ((tlwh[0] + tlwh[3]) / 2)) {
                                    arr[i].parentNode.insertBefore(dragInfo.vObj, arr[i]);
                                    break;
                                }
                                else {
                                    if (!arr[i].nextSibling) {
                                        arr[i].parentNode.appendChild(dragInfo.vObj);
                                        break;
                                    }
                                    else {
                                        arr[i].parentNode.insertBefore(dragInfo.vObj, arr[i].nextSibling);
                                        break;
                                    }
                                }
                            }
                        }
                    }
                    break;
                case "mouseup":
                    if (dragInfo.dObj) {
                        //把拖拽對象重新弄進文檔流（static就是默認的值），替換臨時占位的對象，並初始化dragInfo；
                        dragInfo.dObj.style.position = "static";
                        dragInfo.vObj.parentNode.insertBefore(dragInfo.dObj, dragInfo.vObj);
                        dragInfo.dObj.parentNode.removeChild(dragInfo.vObj);
                        dragInfo = {};
                    }
                    break;
            }
        };

        //綁定事件
        MWood.addHandle(document, "mousedown", handleEvent);
        MWood.addHandle(document, "mousemove", handleEvent);
        MWood.addHandle(document, "mouseup", handleEvent);
    } ();
};

function getObjtlwh(o) {
    var arr = [];
    arr[0] = o.offsetTop;
    arr[1] = o.offsetLeft;
    arr[2] = o.offsetWidth;
    arr[3] = o.offsetHeight;
    return arr
}

下載點擊       

有什么問題或指教請留言。