據說是Google首頁的網頁模塊拖動代碼

2024-09-05 12:18:02

字體：大中小

來源：轉載

供稿：網友

據說是Google首頁的網頁模塊拖動代碼，Google很早就應用了網頁拖動特效，不知大家發(fā)現沒？本款拖動特效可以說是完全模仿了Google的拖動代碼，比較有代表性，因此也很有參考價值，奉獻給大家，僅供參考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>據說是Google首頁的網頁模塊拖動代碼</title>    <script type="text/javascript">        var Common = {            getEvent: function() {//ie/ff                if (document.all) {                    return window.event;                }                func = getEvent.caller;                while (func != null) {                    var arg0 = func.arguments[0];                    if (arg0) {                        if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {                            return arg0;                        }                    }                    func = func.caller;                }                return null;            },            getMousePos: function(ev) {                if (!ev) {                    ev = this.getEvent();                }                if (ev.pageX || ev.pageY) {                    return {                        x: ev.pageX,                        y: ev.pageY                    };                }                if (document.documentElement && document.documentElement.scrollTop) {                    return {                        x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,                        y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop                    };                }                else if (document.body) {                    return {                        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,                        y: ev.clientY + document.body.scrollTop - document.body.clientTop                    };                }            },            getElementPos: function(el) {                el = this.getItself(el);                var _x = 0, _y = 0;                do {                    _x += el.offsetLeft;                    _y += el.offsetTop;                } while (el = el.offsetParent);                return { x: _x, y: _y };            },            getItself: function(id) {                return "string" == typeof id ? document.getElementById(id) : id;            },            getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) },            isIE: document.all ? true : false,            setOuterHtml: function(obj, html) {                var Objrange = document.createRange();                obj.innerHTML = html;                Objrange.selectNodeContents(obj);                var frag = Objrange.extractContents();                obj.parentNode.insertBefore(frag, obj);                obj.parentNode.removeChild(obj);            },            firstChild: function(parentObj, tagName) {                if (Common.isIE) {                    return parentObj.firstChild;                }                else {                    var arr = parentObj.getElementsByTagName(tagName);                    return arr[0];                }            },            lastChild: function(parentObj, tagName) {                if (Common.isIE) {                    return parentObj.lastChild;                }                else {                    var arr = parentObj.getElementsByTagName(tagName);                    return arr[arr.length - 1];                }            },            setCookie: function(name, value) {                document.cookie = name + "=" + value;            },            getCookie: function(name) {                var strCookie = document.cookie;                var arrCookie = strCookie.split("; ");                for (var i = 0; i < arrCookie.length; i++) {                    var arr = arrCookie[i].split("=");                    if (!arr[1]) {                        return "";                    }                    if (arr[0] == name) {                        return arr[1];                    }                }                return "";            },            delCookie: function(name) {                var exp = new Date();                exp.setTime(exp.getTime() - 1);                var cval = this.getCookie(name);                if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();            }        }                ///------------------------------------------------------------------------------------------------------        var Class = {            create: function() {                return function() { this.init.apply(this, arguments); }            }        }        var Drag = Class.create();        Drag.prototype = {            init: function(titleBar, dragDiv, Options) {                //設置點擊是否透明，默認透明60%                titleBar = Common.getItself(titleBar);                dragDiv = Common.getItself(dragDiv);                this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };                if (Options) {                    this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;                    if (Options.area) {                        if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };                        if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };                        if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };                        if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };                    }                }                else {                    this.opacity = 60;                }                this.originDragDiv = null;                this.tmpX = 0;                this.tmpY = 0;                this.moveable = false;                this.dragArray = [];                var dragObj = this;                var dragTbl = document.getElementById("dragTable");                titleBar.onmousedown = function(e) {                    var ev = e || window.event || Common.getEvent();                    //只允許通過鼠標左鍵進行拖拽,IE鼠標左鍵為1 FireFox為0                    if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {                    }                    else {                        return false;                    }                    //處理特殊情況：在最上/下面MOVE時不碰到現有DIV的情況下，又回到起始拖拽的列最上/下方                    var tmpColId;                    for (c = 0; c < dragTbl.rows[0].cells.length; c++) {                        for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k++) {                            if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {                                tmpColId = c;                                break;                            }                        }                    }                    var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));                    var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));                    var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y + Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };                    //保存當前可拖拽各容器的所在位置                    dragObj.dragArray = dragObj.RegDragsPos();                    //插入虛線框                    var dashedElement = document.createElement("div");                    dashedElement.style.cssText = dragDiv.style.cssText;                    dashedElement.style.border = " dashed 2px #aaa ";                    dashedElement.style.marginBottom = "6px";                    dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //減去boderWidth使虛線框大小保持與dragDiv一致                    dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //加上px 保證FF正確                                        dashedElement.style.position = "relative";                    if (dragDiv.nextSibling) {                        dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);                    }                    else {                        dragDiv.parentNode.appendChild(dashedElement);                    }                    //拖動時變?yōu)閍bsolute                    dragDiv.style.width = dragDiv.offsetWidth + "px";                    dragDiv.style.position = "absolute";                    dragObj.moveable = true;                    dragDiv.style.zIndex = dragObj.GetZindex() + 1;                    var downPos = Common.getMousePos(ev);                    dragObj.tmpX = downPos.x - dragDiv.offsetLeft;                    dragObj.tmpY = downPos.y - dragDiv.offsetTop;                    if (Common.isIE) {                        dragDiv.setCapture();                    } else {                        window.captureEvents(Event.mousemove);                    }                    dragObj.SetOpacity(dragDiv, dragObj.opacity);                    //FireFox 去除容器內拖拽圖片問題                    if (ev.preventDefault) {                        ev.preventDefault();                        ev.stopPropagation();                    }                    document.onmousemove = function(e) {                        if (dragObj.moveable) {                            var ev = e || window.event || Common.getEvent();                            //IE 去除容器內拖拽圖片問題                            if (document.all) //IE                            {                                ev.returnValue = false;                            }                            var movePos = Common.getMousePos(ev);                            dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";                            dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";                            var targetDiv = null;                            for (var k = 0; k < dragObj.dragArray.length; k++) {                                if (dragDiv == dragObj.dragArray[i]) {                                    continue;                                }                                if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft + dragObj.dragArray[k].PosWidth                                    && movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight                                ) {                                    targetDiv = document.getElementById(dragObj.dragArray[k].DragId);                                    if (movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight / 2) {                                        //往上移                                        dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";                                        targetDiv.parentNode.insertBefore(dashedElement, targetDiv);                                    }                                    else {                                        //往下移                                        dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";                                        if (targetDiv.nextSibling) {                                            targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);                                        }                                        else {                                            targetDiv.parentNode.appendChild(dashedElement);                                        }                                    }                                }                            }                                                        for (j = 0; j < dragTbl.rows[0].cells.length; j++) {                                var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;                                if (movePos.x > startLeft && movePos.x < startLeft + dragTbl.rows[0].cells[j].offsetWidth) {                                    ///列無DIV                                    if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {                                        dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";                                        dragTbl.rows[0].cells[j].appendChild(dashedElement);                                    }                                    else {                                        var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));                                        var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));                                        //處理特殊情況：在最上/下面MOVE時不碰到現有DIV的情況下，又回到起始拖拽的列最上/下方                                        var tmpUp, tmpDown;                                        if (tmpObj.colId == j) {                                            tmpUp = tmpObj.firstChildUp;                                            tmpDown = tmpObj.lastChildDown;                                        }                                        else {                                            tmpUp = posFirstChild.y;                                            tmpDown = posLastChild.y + Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;                                        }                                        if (movePos.y < tmpUp) {///從最上面插入虛線框                                            dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";                                            dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));                                        }                                        else if (movePos.y > tmpDown) {///從最下面插入虛線框                                            dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";                                            dragTbl.rows[0].cells[j].appendChild(dashedElement);                                        }                                    }                                }                            }                        }                    };                    document.onmouseup = function() {                        if (dragObj.moveable) {                            if (Common.isIE) {                                dragDiv.releaseCapture();                            }                            else {                                window.releaseEvents(dragDiv.mousemove);                            }                            dragObj.SetOpacity(dragDiv, 100);                            dragObj.moveable = false;                            dragObj.tmpX = 0;                            dragObj.tmpY = 0;                            //務必寫在此IF內              dragDiv.style.left = "";                            dragDiv.style.top = "";                            dragDiv.style.width = "";                            dragDiv.style.position = "";                              dashedElement.parentNode.insertBefore(dragDiv, dashedElement);                            dashedElement.parentNode.removeChild(dashedElement);                        }                    };                }            },            SetOpacity: function(dragDiv, n) {                if (Common.isIE) {                    dragDiv.filters.alpha.opacity = n;                }                else {                    dragDiv.style.opacity = n / 100;                }            },            GetZindex: function() {                var maxZindex = 0;                var divs = document.getElementsByTagName("div");                for (z = 0; z < divs.length; z++) {                    maxZindex = Math.max(maxZindex, divs[z].style.zIndex);                }                return maxZindex;            },            RegDragsPos: function() {                var arrDragDivs = new Array();                var dragTbl = document.getElementById("dragTable");                var tmpDiv, tmpPos;                for (i = 0; i < dragTbl.getElementsByTagName("div").length; i++) {                    tmpDiv = dragTbl.getElementsByTagName("div")[i];                    if (tmpDiv.className == "dragDiv") {                        tmpPos = Common.getElementPos(tmpDiv);                        arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });                    }                }                return arrDragDivs;            }        }        window.onload = function() {            var dragTbl = document.getElementById("dragTable");            if (Common.getCookie("configArr")) {                var configArr = eval("(" + Common.getCookie("configArr") + ")");                for (i = 0; i < dragTbl.rows[0].cells.length; i++) {                    for (j = 0; j < configArr[i].length; j++) {                        dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));                    }                }            }            new Drag("titleBar1", "dragDiv1");            new Drag("titleBar2", "dragDiv2");            new Drag("titleBar3", "dragDiv3");            new Drag("titleBar4", "dragDiv4");            new Drag("titleBar5", "dragDiv5");        }        window.onunload = function() {            var dragTbl = document.getElementById("dragTable");            var configArr = "";            for (i = 0; i < dragTbl.rows[0].cells.length; i++) {                var tmpStr = "";                for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; j++) {                    tmpStr += (tmpStr == "" ? "" : ",") + "'" + dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id + "'";                }                configArr += (configArr == "" ? "" : ",") + "[" + tmpStr + "]";            }            //format like: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]            Common.setCookie("configArr", "[" + configArr + "]");                    }    </script>    <style type="text/css">    .spanDiv{    position:relative;    width:5px;    height:5px;    }    .dragDiv,.nodragDiv{    position:relative;    filter:alpha(opacity=100);    opacity:1;    margin-bottom:6px;    background-color:#FFFFFF;    }    </style></head><body > <script type="text/javascript"></script>       <table id="dragTable" cellpadding="3"  style=" border:solid 0px green;width:98%;">        <tr>            <td valign="top" style="width:30%">                <div   id="iwvjtn8m0"   class="dragDiv" id="dragDiv1" >                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">                        <tr id="titleBar1"  style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">                            <th align="left" unselectable="on" >Title1</th>                        </tr>                        <tr style="height:130px;padding:3px;" align="left" valign="top" >                            <td unselectable="on">這里的字比較長....我來了....中國....中國...外國.，看一下有沒有溢出></td>                         </tr>                    </table>                </div>                               <div   id="iwvjtn8m0"   class="dragDiv" id="dragDiv2">                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">                        <tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">                            <th align="left" unselectable="on" >Title2</th>                        </tr>                        <tr style="height:130px;padding:3px;" align="left" valign="top" >                            <td unselectable="on">Content2...</td>                         </tr>                    </table>                </div>            </td>            <td valign="top" style="width:50%">                <div   id="iwvjtn8m0"   class="dragDiv" id="dragDiv3">                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">                        <tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">                            <th align="left" unselectable="on" >Title3</th>                        </tr>                        <tr style="height:230px;padding:3px;" align="left" valign="top" >                            <td unselectable="on">Content3...</td>                         </tr>                    </table>                </div>                            </td>            <td valign="top" style="width:20%">                <div   id="iwvjtn8m0"   class="dragDiv" id="dragDiv4">                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">                        <tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">                            <th align="left" unselectable="on" >Title4</th>                        </tr>                        <tr style="height:130px;padding:3px;" align="left" valign="top" >                            <td unselectable="on">Content4...</td>                         </tr>                    </table>                </div>                <div   id="iwvjtn8m0"   class="dragDiv" id="dragDiv5">                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">                        <tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">                            <th align="left" unselectable="on" >Title5</th>                        </tr>                        <tr style="height:130px;padding:3px;" align="left" valign="top" >                            <td unselectable="on">Content5...</td>                         </tr>                    </table>                </div>            </td>        </tr>        </table></body></html>

上一篇：可控的文字列表上下滾動效果

下一篇：JavaScript 顯示瀏覽器訪問過的網站數