DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS仿iGoogle自定義首頁模塊拖拽特效的方法教程
JS仿iGoogle自定義首頁模塊拖拽特效的方法教程
編輯：關於JavaScript     

本文實例講述了JS仿iGoogle自定義首頁模塊拖拽特效的方法。分享給大家供大家參考。具體實現方法如下：

代碼如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS仿iGoogle自定義首頁模塊拖拽效果</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);
                    }
                    //拖動時變為absolute
                    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 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 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 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 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 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>

<br><br><hr> 收集於互聯網，只為興趣與學習交流，不作商業用途。</font></p>

希望本文所述對大家的javascript程序設計有所幫助。

關於JavaScript
一步一步教你寫帶圖片注釋的淡入淡出插件（三）
其實憑借著之前良好的代碼結構，加入控制器很簡單（^_^這也就是為什麼我說剛開始的架構的代碼結構很重要
JS實現往下不斷流動網頁背景的方法教程
本文實例講述了JS實現往下不斷流動網頁背景的方法。分享給大家供大家參考。具體實現方法如下： 代碼如下
Ubuntu 11.10 安裝Node.js的方法
1.安裝依賴包 復制代碼 代碼如下: sudo apt-get install g++ curl l

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
ko knockoutjs動態屬性綁定技巧應用 js實現綠白相間豎向網頁百葉窗動畫切換效果 js中實現多態采用和繼承類似的方法 JS 實現導航欄懸停效果(續2) 淺談js基本數據類型和typeof ECMAScript6塊級作用域及新變量聲明（let） nodejs實現的一個簡單聊天室功能分享 詳述JavaScript實現繼承的幾種方式(推薦) JS實現不規則TAB選項卡效果代碼 Vuejs第九篇之組件作用域及props數據傳遞實例詳解
熱門推薦
小米公司JavaScript面試題 javascript實現原生ajax的幾種方法介紹 javascript實現淘寶幻燈片廣告展示效果 BootStrap中的table實現數據填充與分頁應用小結 js獲取網址中某個參數的值 JS兩種類型的表單提交方法實例分析 基於JS2Image實現聖誕樹代碼 JavaScript 模塊化編程(筆記) IE6中使用position導致頁面變形的解決方案(js代碼)
大家都在看
js 判斷字符為空 實例分析js和C#中使用正則表達式匹配a標簽 7.1 CSS超鏈接樣式概述 JS定時刷新頁面及跳轉頁面的方法 徹底弄懂閉合浮動元素 javascript中var的重要性分析 js的typeof 給XML初學者
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved