iGoogle カスタム ホーム ページ モジュールのドラッグ アンド ドロップ効果を模倣する JS メソッド_JavaScript スキル

この記事の例では、JS を使用して iGoogle のカスタム ホーム ページ モジュールのドラッグ アンド ドロップ効果を模倣する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>

   
    <スクリプトタイプ="text/javascript">
        var Common = {
            getEvent: function() {//ie/ff
                if (document.all) {
                    window.event を返します;
                }
                func = getEvent.caller;
                while (func != null) {
                    var arg0 = func.arguments[0];
                    if (arg0) {
                        if ((arg0.constructor == イベント || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                            arg0 を返す;
                        }
                    }
                    func = func.caller;
                }
                null を返す;
            }、
            getMousePos: function(ev) {
                if (!ev) {
                    ev = this.getEvent();
                }
                if (ev.pageX || ev.pageY) {
                    戻り値 {
                        x: ev.pageX,
                        y: ev.pageY
                    };
                }

if (document.documentElement && document.documentElement.scrollTop) {
                    戻り値 {
                        x: ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft,
                        y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop
                    };
                }
                else if (document.body) {
                    戻り値 {
                        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;
                {
を実行します                     _x = el.offsetLeft;
                    _y = el.offsetTop;
                while (el = el.offsetParent);
                return { x: _x, y: _y };
            }、
            getItself: function(id) {
                return "string" == 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) {
                    returnparentObj.firstChild;
                }
                他 {
                    var arr =parentObj.getElementsByTagName(タグ名);
                    arr[0];
を返す                 }
            }、
            lastChild: function(parentObj, tagName) {
                if (Common.isIE) {
                    returnparentObj.lastChild;
                }
                他 {
                    var arr =parentObj.getElementsByTagName(タグ名);
                    return arr[arr.length - 1];
                }
            }、
            setCookie: 関数(名前, 値) {
                document.cookie = 名前 "=" 値;
            }、
            getCookie: 関数(名前) {
                var strCookie = document.cookie;
                var arrCookie = strCookie.split("; ");
                for (var i = 0; i                     var arr = arrCookie[i].split("=");
                    if (!arr[1]) {
                        "" を返します;
                    }
                    if (arr[0] == 名前) {
                        return arr[1];
                    }
                }
                "" を返します;
            }、
            delCookie: 関数(名前) {
                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 クラス = {
            作成: function() {
                return function() { this.init.apply(this, 引数); }
            }
        }
        var Drag = Class.create();
        Drag.prototype = {
            init: function(titleBar、dragDiv、Options) {
                //設置点击が透明かどうか、默认透明60%
                titleBar = Common.getItself(titleBar);
                ragDiv = Common.getItself(dragDiv);
                this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };
                if (オプション) {
                    this.opacity = オプション.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
                    if (オプション.エリア) {
                        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 };
                    }
                }
                他 {
                    this.opacity = 60;
                }
                this.originDragDiv = null;
                this.tmpX = 0;
                this.tmpY = 0;
                this.moveable = false;
                this.dragArray = [];

varragObj = this;
                varragTbl = document.getElementById("dragTable");

titleBar.onmousedown = function(e) {
var ev = e || window.event || Common.getEvent();
// マウスの左ボタンによるドラッグのみを許可します。マウスの左ボタンは 1 Firefox から 0 です
If (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
}
else {
falseを返します。 }

// 特殊な状況の処理: 移動時に既存の DIV がタッチされない場合上/下から上に移動すると、最初にドラッグした列の最上/下に戻ります

var tmpColId;
for (c = 0; c for (k = 0; k If (dragDiv.id ==ragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {
tmpColId = c; 休憩;
} } }
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 };

//ドラッグアンドドロップできる各コンテナの現在の場所を保存します
ragObj.dragArray =ragObj.RegDragsPos();

//点線のボックスを挿入
var dumpedElement = document.createElement("div");
ダッシュ要素.スタイル.cssText = ドラッグDiv.style.cssText;
crashedElement.style.border = " 破線 2px #aaa ";
ダッシュ要素.style.marginBottom = "6px";
ダッシュ要素.style.width =ragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px" // 破線ボックスのサイズをドラッグDiv
と一致させるためにbodyWidthを減算します。 dumpedElement.style.height =ragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) "px"; //FF が正しいことを確認するために px を追加します ダッシュ要素.style.position = "相対";
If (dragDiv.nextSibling) {
ragDiv.parentNode.insertBefore(dashedElement,ragDiv.nextSibling);
}
else {
ragDiv.parentNode.appendChild(dashedElement);
}
//ドラッグ時に絶対値
に変更 ragDiv.style.width =ragDiv.offsetWidth "px";
ragDiv.style.position = "絶対";

ragObj.moveable = true;
ragDiv.style.zIndex =ragObj.GetZindex() 1;

var downPos = Common.getMousePos(ev);

ragObj.tmpX = downPos.x -ragDiv.offsetLeft;
ragObj.tmpY = downPos.y -ragDiv.offsetTop;

if (Common.isIE) {

ragDiv.setCapture();
} else {
window.captureEvents(Event.mousemove);
}

ragObj.SetOpacity(dragDiv,ragObj.opacity);

//FireFox はコンテナ内の画像のドラッグの問題を解決します
if (ev.preventDefault) {
ev.preventDefault();
ev.stopPropagation();
}

document.onmousemove = function(e) {
If (dragObj.moveable) {
var ev = e || Common.getEvent();
//IE はコンテナ内での画像のドラッグの問題を解決します
If (document.all) //IE
                                                                                                                                                                                                                                                                                                                     }
var movePos = Common.getMousePos(ev);
ragDiv.style.left = Math.max(Math.min(movePos.x -ragObj.tmpX,ragObj.dragArea.maxRight),dragObj.dragArea.maxLeft) "px";

ragDiv.style.top = Math.max(Math.min(movePos.y -ragObj.tmpY,ragObj.dragArea.maxBottom),dragObj.dragArea.maxTop) "px";

var targetDiv = null;
for (var k = 0; k If (dragDiv ==ragObj.dragArray[i]) {

続く;                                                                                                                                                                                                                                                                        

if (movePos.x >ragObj.dragArray[k].PosLeft && movePos.x                                     && movePos.y > ragObj.dragArray[k].PosTop && movePos.y <ドラッグObj.dragArray[k].PosTop ドラッグObj.dragArray[k].PosHeight
                                ) {
                                    targetDiv = document.getElementById(dragObj.dragArray[k].DragId);
                                    if (movePos.y                                         //往上移
                                        crashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                        targetDiv.parentNode.insertBefore(dashedElement, targetDiv);
                                    }
                                    他 {
                                        //往下移
                                        crashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                        if (targetDiv.nextSibling) {
                                            targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);
                                        }
                                        他 {
                                            targetDiv.parentNode.appendChild(dashedElement);
                                        }
                                    }
                                }
                            }
                           
                            for (j = 0; j                                 var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;
                                if (movePos.x > startLeft && movePos.x < startLeftragTbl.rows[0].cells[j].offsetWidth) {
                                    ///列無しDIV
                                    if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {
                                        rashedElement.style.width =ragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                        ragTbl.rows[0].cells[j].appendChild(dashedElement);
                                    }
                                    他 {
                                        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) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                            以来                                                                                 tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;
                                                                                     
if (movepos.y & lt; tmpup) {/// 点線枠内に上から挿入
crashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
ragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
                                                                                      に rashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
ragTbl.rows[0].cells[j].appendChild(dashedElement);

                                                                                     

}
                                }
                            }
                        }
                    };

document.onmouseup = function() {
                        if (dragObj.moveable) {
                            if (Common.isIE) {
                                ragDiv.releaseCapture();
                            }
                            他 {
                                window.releaseEvents(dragDiv.mousemove);
                            }
                            ragObj.SetOpacity(dragDiv, 100);
                            ragObj.moveable = false;
                            ドラッグオブジェクト.tmpX = 0;
                            ドラッグオブジェクト.tmpY = 0;

//务必写此IF内
                            ragDiv.style.left = "";
                            ragDiv.style.top = "";

ragDiv.style.width = "";
                            ドラッグDiv.style.position = ""; 
                            ダッシュ要素.parentNode.insertBefore(dragDiv, ダッシュ要素);
                            ダッシュ要素.parentNode.removeChild(ダッシュ要素);
                        }

};

}
            }、
            SetOpacity: function(dragDiv, n) {
                if (Common.isIE) {
                    ragDiv.filters.alpha.opacity = n;
                }
                他 {
                    ragDiv.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);
                }
                maxZindex を返します;
            }、
            RegDragsPos: function() {
                var arrDragDivs = 新しい Array();
                varragTbl = document.getElementById("dragTable");
                var tmpDiv、tmpPos;
                for (i = 0; i                     tmpDiv =ragTbl.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() {
            varragTbl = document.getElementById("dragTable");
            if (Common.getCookie("configArr")) {
                var configArr = eval("(" Common.getCookie("configArr") ")");
                for (i = 0; i                     for (j = 0; j < configArr[i].length; j ) {
                        ragTbl.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() {
            varragTbl = document.getElementById("dragTable");
            var configArr = "";
            for (i = 0; i                 var tmpStr = "";
                for (j = 0; j
                    tmpStr = (tmpStr == "" ? "" : ",") "'"ragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'";
                }
                configArr = (configArr == "" ? "" : ",") "[" tmpStr "]";
            }
            //次のような形式: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]
            Common.setCookie("configArr", "[" configArr "]");           
        }
   
   


<スクリプトタイプ="text/javascript">

  
   

       
           
           

Title1 这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出>                                                                                                                                                                                                                                                Title2 Content2...

Title3 コンテンツ 3...      声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。 前の記事：JavaScript は正規表現を使用して、spaces_javascript スキルの後の文字を削除します次の記事：JavaScript は正規表現を使用して、spaces_javascript スキルの後の文字を削除します 関連記事 続きを見る Bootstrap リスト グループ コンポーネントの詳細な分析 JavaScript関数のカリー化の詳細説明 JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き) Angularjs は WeChat UI (weui) を統合します JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル ホームページ コース に質問 私の ホームページ コース 記事 に質問 辞書 マニュアル ダウンロード 特集 ホームページ 記事 に質問 コース 特集 ダウンロード ゲーム 辞書 简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）