이 기사의 예에서는 JS를 사용하여 iGoogle의 맞춤 홈페이지 모듈 드래그 앤 드롭 효과를 모방하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. JS仿iGoogle 자체 정의义首页模块拖拽效果 <br> var 공통 = {<br> getEvent: 함수() {//ie/ff<br> if (document.all) {<br> return window.event;<br> }<br> func = getEvent.caller;<br> while (func != null) {<br> var arg0 = func.arguments[0];<br> if (arg0) {<br> if ((arg0.constructor == 이벤트 || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {<br> 반환 인수0;<br> }<br> }<br> func = func.caller;<br> }<br> null을 반환합니다.<br> },<br> getMousePos: 함수(ev) {<br> if (!ev) {<br> ev = this.getEvent();<br> }<br> if (ev.pageX || ev.pageY) {<br> 반환 {<br> x: ev.pageX,<br> y: ev.pageY<br> };<br> }<p> if (document.documentElement && document.documentElement.scrollTop) {<br> 반환 {<br> x: ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft,<br> y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop<br> };<br> }<br> else if (document.body) {<br> 반환 {<br> x: ev.clientX document.body.scrollLeft - document.body.clientLeft,<br> y: ev.clientY document.body.scrollTop - document.body.clientTop<br> };<br> }<br> },<br> getElementPos: 함수(el) {<br> el = this.getItself(el);<br> var _x = 0, _y = 0;<br> 하세요 {<br> _x = el.offsetLeft;<br> _y = el.offsetTop;<br> } while (el = el.offsetParent);<br> 반환 { x: _x, y: _y };<br> },<br> getItself: 함수(id) {<br> return "string" == ID 유형 ? document.getElementById(id) : id;<br> },<br> 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) },<br> isIE: document.all ? 사실 : 거짓, <br> setOuterHtml: 함수(obj, html) {<br> var Objrange = document.createRange();<br> obj.innerHTML = html;<br> Objrange.selectNodeContents(obj);<br> var frag = Objrange.extractContents();<br> obj.parentNode.insertBefore(frag, obj);<br> obj.parentNode.removeChild(obj);<br> },<br> firstChild: 함수(parentObj, tagName) {<br> if (Common.isIE) {<br> return parentObj.firstChild;<br> }<br> 그렇지 않으면 {<br> var arr = parentObj.getElementsByTagName(tagName);<br> 반환 arr[0];<br> }<br> },<br> lastChild: 함수(parentObj, tagName) {<br> if (Common.isIE) {<br> return parentObj.lastChild;<br> }<br> 그렇지 않으면 {<br> var arr = parentObj.getElementsByTagName(tagName);<br> return arr[arr.length - 1];<br> }<br> },<br> setCookie: 함수(이름, 값) {<br> document.cookie = 이름 "="값;<br> },<br> getCookie: 함수(이름) {<br> var strCookie = document.cookie;<br> var arrCookie = strCookie.split("; ");<br> for (var i = 0; i < arrCookie.length; i ) {<br /> var arr = arrCookie[i].split("=");<br /> if (!arr[1]) {<br /> 반환 "";<br /> }<br /> if (arr[0] == 이름) {<br /> 반환 arr[1];<br /> }<br /> }<br /> 반환 "";<br /> },<br /> delCookie: 함수(이름) {<br /> var exp = new Date();<br /> exp.setTime(exp.getTime() - 1);<br /> var cval = this.getCookie(이름);<br /> if (cval != null) document.cookie = name "=" cval ";expires=" exp.toGMTString();<br /> }<br /> }<br /> var 클래스 = {<br /> 생성: 함수() {<br /> return function() { this.init.apply(this, 인수); }<br /> }<br /> }<br /> var Drag = Class.create();<br /> Drag.prototype = {<br /> 초기화: 함수(titleBar, dragDiv, 옵션) {<br /> //设置点击是否透明,默认透ming60%<br /> titleBar = Common.getItself(titleBar);<br /> dragDiv = Common.getItself(dragDiv);<br /> this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };<br /> if (옵션) {<br /> this.opacity = 옵션.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 :parseInt(Options.opacity)) : 100;<br /> if (Options.area) {<br /> if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };<br /> if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };<br /> if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };<br /> if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };<br /> }<br /> }<br /> 그렇지 않으면 {<br /> this.opacity = 60;<br /> }<br /> this.originDragDiv = null;<br /> this.tmpX = 0;<br /> this.tmpY = 0;<br /> this.movable = false;<br /> this.dragArray = [];</p> <p> var dragObj = this;<br /> var dragTbl = document.getElementById("dragTable");</p><p> titleBar.onmousedown = 함수(e) {<br /> var ev = e || window.event || Common.getEvent();<br /> // 마우스 왼쪽 버튼으로만 드래그할 수 있도록 허용합니다. 마우스 왼쪽 버튼은 1 Firefox에서 0까지입니다. <br /> If (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {<br /> }<br /> 그 외 {<br /> | }<br /> </p> // 특수 상황 처리: 기존 DIV를 건드리지 않은 경우 상단/하단에서 상단으로 이동하면 원래 드래그했던 열의 상단/하단으로 돌아갑니다 <p> var tmpColId;<br /> for (c = 0; c < dragTbl.rows[0].cells.length; c ) {<br /> for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k ) {<br /> If (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {<br /> > 휴식;<br /> | | }<br /> var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));<br /> var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));<br /> var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };<br /> <br /> //드래그 앤 드롭이 가능한 각 컨테이너의 현재 위치를 저장합니다<br /> dragObj.dragArray = dragObj.RegDragsPos();<br /><p> //점선 상자 삽입 <br /> var dashedElement = document.createElement("div");<br /> dashedElement.style.cssText = dragDiv.style.cssText;<br /> dashedElement.style.border = " 점선 2px #aaa ";<br /> dashedElement.style.marginBottom = "6px";<br /> > dashedElement.style.height = dragDiv.offsetHeight - 2 *parseInt(dashedElement.style.borderWidth) "px"; //FF가 올바른지 확인하기 위해 px를 추가하세요. dashedElement.style.position = "상대적";<br /> If (dragDiv.nextSibling) {<br /> > }<br /> 그 외 {<br /> dragDiv.parentNode.appendChild(dashedElement);<br /> }<br /> //드래그할 때 절대값으로 변경<br /> dragDiv.style.width = dragDiv.offsetWidth "px";<br /> dragDiv.style.position = "절대";<br /> <br /><br /> dragObj.moveable = true;</p> dragDiv.style.zIndex = dragObj.GetZindex() 1;<p> <br /> var downPos = Common.getMousePos(ev);<br /> dragObj.tmpX = downPos.x - dragDiv.offsetLeft;</p> dragObj.tmpY = downPos.y - dragDiv.offsetTop;<p> <br /> if (Common.isIE) {<br /> dragDiv.setCapture();</p> } else {<p> window.captureEvents(Event.mousemove);<br /> }<br /> <br /> dragObj.SetOpacity(dragDiv, dragObj.opacity);<br /><p> //FireFox는 컨테이너에서 이미지를 드래그하는 문제를 제거합니다 <br /> if (ev.preventDefault) {<br /> ev.preventDefault();<br /> ev.stopPropagation();<br /> }</p> <p> document.onmousemove = 함수(e) {<br /> If (dragObj.moveable) {<br /> var ev = e || window.event || //IE는 컨테이너 내에서 이미지를 드래그하는 문제를 제거합니다 <br /> If (document.all) //IE<br /> ~ > > | <br /> var movePos = Common.getMousePos(ev);<br /> dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) "px";<br /> dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) "px";</p> <p> var targetDiv = null;<br /> for (var k = 0; k < dragObj.dragArray.length; k ) {<br /> If (dragDiv == dragObj.dragArray[i]) {</p> 계속하다; ~ ~ <p> if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft dragObj.dragArray[k].PosWidth<br /> && movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop dragObj.dragArray[k].PosHeight<br /> ) {<br /> targetDiv = document.getElementById(dragObj.dragArray[k].DragId);<br /> if (movePos.y < dragObj.dragArray[k].PosTop dragObj.dragArray[k].PosHeight / 2) {<br /> //往上移<br /> dashedElement.style.width = targetDiv.offsetWidth - 2 *parseInt(dashedElement.style.borderWidth) "px";<br /> targetDiv.parentNode.insertBefore(dashedElement, targetDiv);<br /> }<br /> 그렇지 않으면 {<br /> //往下移<br /> dashedElement.style.width = targetDiv.offsetWidth - 2 * parsInt(dashedElement.style.borderWidth) "px";<br /> if (targetDiv.nextSibling) {<br /> targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);<br /> }<br /> 그렇지 않으면 {<br /> targetDiv.parentNode.appendChild(dashedElement);<br /> }<br /> }<br /> }<br /> }<br /> <br /> for (j = 0; j < dragTbl.rows[0].cells.length; j ) {<br /> var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;<br /> if (movePos.x > startLeft && movePos.x < startLeft dragTbl.rows[0].cells[j].offsetWidth) {<br /> ///列无DIV<br /> if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {<br /> dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parsInt(dashedElement.style.borderWidth) "px";<br /> dragTbl.rows[0].cells[j].appendChild(dashedElement);<br /> }<br /> 그렇지 않으면 {<br /> var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));<br /> var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));<br /> //处理特殊情况:현재/하향면MOVE时不碰到现有DIV的情况下,又回到起始拖拽的列最上/下方<br /> var tmpUp, tmpDown;<br /> if (tmpObj.colId == j) {<br />> > 부터 ~ tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;<br /> <br /> if (movepos.y & lt; tmpup) {/// 위에서 점선 프레임에 삽입 <br /> dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 *parseInt(dashedElement.style.borderWidth) "px";<br /> 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";<br /> dragTbl.rows[0].cells[j].appendChild(dashedElement);<br /> ~<p> }<br /> }<br /> }<br /> }<br /> };</p> <p> document.onmouseup = function() {<br /> if (dragObj.moveable) {<br /> if (Common.isIE) {<br /> dragDiv.releaseCapture();<br /> }<br /> 그렇지 않으면 {<br /> window.releaseEvents(dragDiv.mousemove);<br /> }<br /> dragObj.SetOpacity(dragDiv, 100);<br /> dragObj.moveable = false;<br /> dragObj.tmpX = 0;<br /> dragObj.tmpY = 0;</p> <p> //务必写在此IF内<br /> dragDiv.style.left = "";<br /> dragDiv.style.top = "";</p> <p> dragDiv.style.width = "";<br /> dragDiv.style.position = ""; <br /> dashedElement.parentNode.insertBefore(dragDiv, dashedElement);<br /> dashedElement.parentNode.removeChild(dashedElement);<br /> }</p> <p> };</p><p> }<br /> },<br /> SetOpacity: function(dragDiv, n) {<br /> if (Common.isIE) {<br /> dragDiv.filters.alpha.opacity = n;<br /> }<br /> 그렇지 않으면 {<br /> dragDiv.style.opacity = n / 100;<br /> }</p> <p> },<br /> GetZindex: 함수() {<br /> var maxZindex = 0;<br /> var divs = document.getElementsByTagName("div");<br /> for (z = 0; z < divs.length; z ) {<br /> maxZindex = Math.max(maxZindex, divs[z].style.zIndex);<br /> }<br /> maxZindex를 반환합니다.<br /> },<br /> RegDragsPos: 함수() {<br /> var arrDragDivs = new Array();<br /> var dragTbl = document.getElementById("dragTable");<br /> var tmpDiv, tmpPos;<br /> for (i = 0; i < dragTbl.getElementsByTagName("div").length; i ) {<br /> tmpDiv = dragTbl.getElementsByTagName("div")[i];<br /> if (tmpDiv.className == "dragDiv") {<br /> tmpPos = Common.getElementPos(tmpDiv);<br /> arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });<br /> }<br /> }<br /> arrDragDivs를 반환합니다.<br /> }<br /> }</p><p> window.onload = function() {<br /> var dragTbl = document.getElementById("dragTable");<br /> if (Common.getCookie("configArr")) {<br /> var configArr = eval("(" Common.getCookie("configArr") ")");<br /> for (i = 0; i < dragTbl.rows[0].cells.length; i ) {<br /> for (j = 0; j < configArr[i].length; j ) {<br /> dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));<br /> }<br /> }<br /> }<br /> new Drag("titleBar1", "dragDiv1");<br /> new Drag("titleBar2", "dragDiv2");<br /> new Drag("titleBar3", "dragDiv3");<br /> new Drag("titleBar4", "dragDiv4");<br /> new Drag("titleBar5", "dragDiv5");<br /> }</p> <p> window.onunload = function() {<br /> var dragTbl = document.getElementById("dragTable");<br /> var configArr = "";<br /> for (i = 0; i < dragTbl.rows[0].cells.length; i ) {<br /> var tmpStr = "";<br /> for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; j ) {<br /> tmpStr = (tmpStr == "" ? "" : ",") "'" dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'";<br /> }<br /> configArr = (configArr == "" ? "" : ",") "[" tmpStr "]";<br /> }<br /> //형식은 다음과 같습니다: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]<br /> Common.setCookie("configArr", "[" configArr "]"); <br /> }<br /> <br> .spanDiv{<br> 위치:상대;<br> 너비:5px;<br> 높이:5px;<br> }</p> <p> .dragDiv,.nodragDiv{<br> 위치:상대;<br> 필터:알파(불투명도=100);<br> 불투명도:1;<br> 여백-하단:6px;<br> 배경색:#FFFFFF;<br> }<br> </스타일><br> </머리><br> <본문> <br> <script type="text/javascript"></p> <p></script> <br> <table id="dragTable" cellpadding="3" style=" border:solid 0px green;width:98%;"><br> <tr><br> <td valign="top" style="width:30%"><br> <div class="dragDiv" id="dragDiv1" ><br> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"><br> <tr id="titleBar1" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"><br> <th align="left" unselectable="on" >Title1</th><br> </tr><br> <tr style="height:130px;padding:3px;" align="left" valign="top" ><br> <td unselectable="on">这里的字比较长....我来了....中国....中国...外国.,看一下有没有溢出></td> <br> </tr><br> </table><br> </div> <br> <div class="dragDiv" id="dragDiv2"><br> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"><br> <tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"><br> <th align="left" unselectable="on" >Title2</th><br> </tr><br> <tr style="height:130px;padding:3px;" align="left" valign="top" ><br> <td unselectable="on">Content2...</td> <br> </tr><br> </table><br> </div><br> </td><br> <td valign="top" style="width:50%"><br> <div class="dragDiv" id="dragDiv3"><br> <table cellpadding="0" cellpacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"><br> <tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"><br> <th align="left" unselectable="on" >Title3</th><br> </tr><br> <tr style="높이:230px;패딩:3px;" align="left" valign="top" ><br> <td unselectable="on">Content3...</td> <br> </tr><br> </테이블><br> </div> <br> </td><br> <td valign="top" style="width:20%"><br> </p> </div>