iGoogle 맞춤 홈페이지 모듈 드래그 앤 드롭 효과를 모방하는 JS 방법

이 기사의 예에서는 JS를 사용하여 iGoogle의 맞춤 홈페이지 모듈 드래그 앤 드롭 효과를 모방하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

JS仿iGoogle 자체 정의义首页模块拖拽效果 var 공통 = { getEvent: 함수() {//ie/ff if (document.all) { return 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)) { 반환 인수0; } } func = func.caller; } null을 반환합니다. }, getMousePos: 함수(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: 함수(el) { el = this.getItself(el); var _x = 0, _y = 0; 하세요 { _x = el.offsetLeft; _y = el.offsetTop; } while (el = el.offsetParent); 반환 { x: _x, y: _y }; }, getItself: 함수(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 ? 사실 : 거짓, setOuterHtml: 함수(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: 함수(parentObj, tagName) { if (Common.isIE) { return parentObj.firstChild; } 그렇지 않으면 { var arr = parentObj.getElementsByTagName(tagName); 반환 arr[0]; } }, lastChild: 함수(parentObj, tagName) { if (Common.isIE) { return parentObj.lastChild; } 그렇지 않으면 { var arr = parentObj.getElementsByTagName(tagName); 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] == 이름) { 반환 arr[1]; } } 반환 ""; }, delCookie: 함수(이름) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = this.getCookie(이름); if (cval != null) document.cookie = name "=" cval ";expires=" exp.toGMTString(); } } var 클래스 = { 생성: 함수() { return function() { this.init.apply(this, 인수); } } } var Drag = Class.create(); Drag.prototype = { 초기화: 함수(titleBar, dragDiv, 옵션) { //设置点击是否透明，默认透ming60% titleBar = Common.getItself(titleBar); dragDiv = 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 (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 }; } } 그렇지 않으면 { this.opacity = 60; } this.originDragDiv = null; this.tmpX = 0; this.tmpY = 0; this.movable = false; this.dragArray = [];

var dragObj = this; var dragTbl = document.getElementById("dragTable");

titleBar.onmousedown = 함수(e) { var ev = e || window.event || Common.getEvent(); // 마우스 왼쪽 버튼으로만 드래그할 수 있도록 허용합니다. 마우스 왼쪽 버튼은 1 Firefox에서 0까지입니다. If (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) { } 그 외 { | }

// 특수 상황 처리: 기존 DIV를 건드리지 않은 경우 상단/하단에서 상단으로 이동하면 원래 드래그했던 열의 상단/하단으로 돌아갑니다 var tmpColId; for (c = 0; c for (k = 0; k If (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) { > 휴식; | | } 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 = " 점선 2px #aaa "; dashedElement.style.marginBottom = "6px"; > dashedElement.style.height = dragDiv.offsetHeight - 2 *parseInt(dashedElement.style.borderWidth) "px"; //FF가 올바른지 확인하기 위해 px를 추가하세요. dashedElement.style.position = "상대적"; If (dragDiv.nextSibling) { > } 그 외 { dragDiv.parentNode.appendChild(dashedElement); } //드래그할 때 절대값으로 변경 dragDiv.style.width = dragDiv.offsetWidth "px"; dragDiv.style.position = "절대";

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 = 함수(e) { If (dragObj.moveable) { var ev = e || window.event || //IE는 컨테이너 내에서 이미지를 드래그하는 문제를 제거합니다 If (document.all) //IE ~ > > | 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 If (dragDiv == dragObj.dragArray[i]) {

계속하다; ~ ~ if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x && movePos.y > dragObj.dragArray[k].PosTop && movePos.y ) { targetDiv = document.getElementById(dragObj.dragArray[k].DragId); if (movePos.y //往上移 dashedElement.style.width = targetDiv.offsetWidth - 2 *parseInt(dashedElement.style.borderWidth) "px"; targetDiv.parentNode.insertBefore(dashedElement, targetDiv); } 그렇지 않으면 { //往下移 dashedElement.style.width = targetDiv.offsetWidth - 2 * parsInt(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 ///列无DIV if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) { dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parsInt(dashedElement.style.borderWidth) "px"; dragTbl.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) {/// 위에서 점선 프레임에 삽입 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"); ~ 에게 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(); } 그렇지 않으면 { 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; } 그렇지 않으면 { dragDiv.style.opacity = n / 100; }

}, GetZindex: 함수() { var maxZindex = 0; var divs = document.getElementsByTagName("div"); for (z = 0; z maxZindex = Math.max(maxZindex, divs[z].style.zIndex); } maxZindex를 반환합니다. }, RegDragsPos: 함수() { var arrDragDivs = new Array(); var dragTbl = document.getElementById("dragTable"); var tmpDiv, tmpPos; for (i = 0; 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 }); } } arrDragDivs를 반환합니다. } }

window.onload = function() { var dragTbl = document.getElementById("dragTable"); if (Common.getCookie("configArr")) { var configArr = eval("(" Common.getCookie("configArr") ")"); for (i = 0; i for (j = 0; 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 var tmpStr = ""; for (j = 0; j tmpStr = (tmpStr == "" ? "" : ",") "'" dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'"; } configArr = (configArr == "" ? "" : ",") "[" tmpStr "]"; } //형식은 다음과 같습니다: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']] Common.setCookie("configArr", "[" configArr "]"); } .spanDiv{ 위치:상대; 너비:5px; 높이:5px; }

.dragDiv,.nodragDiv{ 위치:상대; 필터:알파(불투명도=100); 불투명도:1; 여백-하단:6px; 배경색:#FFFFFF; }

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

iGoogle 맞춤 홈페이지 모듈 드래그 앤 드롭 효과를 모방하는 JS 방법_javascript 기술