Kaedah JS untuk meniru modul halaman utama tersuai iGoogle kemahiran seret dan lepas effect_javascript

Contoh dalam artikel ini menerangkan cara menggunakan JS untuk meniru kesan seret dan lepas modul halaman utama tersuai iGoogle. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut: JS仿iGoogle自定义首页模块拖拽效果 var Biasa = { getEvent: function() {//iaitu/ff jika (dokumen.semua) { tetingkap kembali.acara; } func = getEvent.caller; manakala (func != null) { var arg0 = func.arguments[0]; jika (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "objek" && arg0.preventDefault && arg0.stopPropagation)) { kembalikan arg0; } } func = func.caller; } kembalikan null; }, getMousePos: function(ev) { jika (!ev) { ev = this.getEvent(); } jika (ev.pageX || ev.pageY) { kembali { x: ev.pageX, y: ev.pageY }; } jika (document.documentElement && document.documentElement.scrollTop) { kembali { x: ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft, y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop }; } lain jika (dokumen.badan) { kembali { x: ev.clientX document.body.scrollLeft - document.body.clientLeft, y: ev.clientY document.body.scrollTop - document.body.clientTop }; } }, getElementPos: fungsi(el) { el = this.getItself(el); var _x = 0, _y = 0; lakukan { _x = el.offsetLeft; _y = el.offsetTop; } manakala (el = el.offsetParent); kembalikan { x: _x, y: _y }; }, getItself: function(id) { kembalikan "rentetan" == jenis 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 ? benar : salah, 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); }, Anak pertama: fungsi(parentObj, tagName) { jika (Common.isIE) { kembalikan ibu bapaObj.firstChild; } lain { var arr = parentObj.getElementsByTagName(tagName); kembalikan arr[0]; } }, lastChild: function(parentObj, tagName) { jika (Common.isIE) { return parentObj.lastChild; } lain { var arr = parentObj.getElementsByTagName(tagName); kembalikan arr[arr.length - 1]; } }, setCookie: fungsi(nama, nilai) { document.cookie = nama "=" nilai; }, getCookie: fungsi(nama) { var strCookie = document.cookie; var arrCookie = strCookie.split("; "); untuk (var i = 0; i var arr = arrCookie[i].split("="); jika (!arr[1]) { kembalikan ""; } jika (arr[0] == nama) { kembalikan arr[1]; } } kembalikan ""; }, delCookie: fungsi(nama) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = this.getCookie(nama); if (cval != null) document.cookie = name "=" cval ";expires=" exp.toGMTString(); } } var Kelas = { cipta: function() { return function() { this.init.apply(this, arguments); } } } var Seret = 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 }; jika (Pilihan) { this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)): 100; jika (Pilihan.kawasan) { jika (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left }; jika (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right }; jika (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top }; jika (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom }; } } lain { this.opacity = 60; } this.originDragDiv = null; this.tmpX = 0; this.tmpY = 0; this.moveable = palsu; this.dragArray = [];

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

titleBar.onmousedown = fungsi(e) { var ev = e || window.event || // Hanya benarkan ia menyeret melalui butang kiri tetikus Butang kiri tetikus ialah 1 firefox hingga 0 Jika (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) { } lain { return palsu }

// Mengendalikan situasi khas: Jika div yang ada tidak disentuh semasa langkah atas/bawah, ia akan kembali ke bahagian atas/bawah lajur di mana seret dimulakan

var tmpColId; untuk (c = 0; c untuk (k = 0; k Jika (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) { ; rehat; } 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["HeightDIV }]offset, //Simpan lokasi semasa setiap bekas yang boleh diseret dan dijatuhkan dragObj.dragArray = dragObj.RegDragsPos(); //Masukkan kotak bertitik var dashedElement = document.createElement("div"); dashedElement.style.cssText = dragDiv.style.cssText; dashedElement.style.border = " putus 2px #aaa "; dashedElement.style.marginBottom = "6px"; dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px" //Tolak bodyWidth untuk memastikan saiz kotak putus-putus konsisten dengan dragDiv dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) "px"; //Tambah px untuk memastikan FF yang betul dashedElement.style.position = "relative"; Jika (dragDiv.nextSibling) { dragDiv.parentNode.insertBefore(dashedElement, drag Div.nextSibling>); lain { dragDiv.parentNode.appendChild(dashedElement); } //Perubahan kepada mutlak apabila menyeret dragDiv.style.width = dragDiv.offsetWidth "px"; dragDiv.style.position = "mutlak";

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;

jika (Common.isIE) {

dragDiv.setCapture(); } lain { window.captureEvents(Event.mousemove); }

dragObj.SetOpacity(dragDiv, dragObj.opacity);

//FireFox menghilangkan masalah menyeret imej dalam bekas Jika (ev.preventDefault) { ev.preventDefault(); 1 }

document.onmousemove = fungsi(e) { Jika (dragObj.moveable) { var ev = e || window.event || //IE menghapuskan masalah menyeret imej dalam bekas Jika (dokumen.semua) //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; untuk (var k = 0; k < dragObj.dragArray.length; k ) {

Jika (dragDiv == dragObj.dragArray[i]) { teruskan; } jika (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x dragObj.dragArray[k].PosTop && movePos.y ) { targetDiv = document.getElementById(dragObj.dragArray[k].DragId); jika (movePos.y //往上移 dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; targetDiv.parentNode.insertBefore(dashedElement, targetDiv); } lain { //往下移 dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; jika (targetDiv.nextSibling) { targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling); } lain { targetDiv.parentNode.appendChild(dashedElement); } } } } untuk (j = 0; j var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x; jika (movePos.x > startLeft && movePos.x ///列无DIV if (dragTbl.rows[0].cells[j].getElementsByTagName("div").panjang == 0) { dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; dragTbl.rows[0].cells[j].appendChild(dashedElement); } lain { 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; jika (tmpObj.colId == j) { sejak tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight; jika (movepos.y & lt; tmpup) {/// dimasukkan ke dalam bingkai bertitik dari atas dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; seretTbl.rows[0].cells[j].sisipkanSebelum(dashedElement, Common.firstChilds, Common. first). 🎜> Lain jika (movepos.y & gt; tmpdown) {/// dimasukkan ke dalam bingkai bertitik dari bawah 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) { jika (Common.isIE) { dragDiv.releaseCapture(); } lain { window.releaseEvents(dragDiv.mousemove); } dragObj.SetOpacity(dragDiv, 100); dragObj.moveable = palsu; 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: fungsi(dragDiv, n) { jika (Common.isIE) { dragDiv.filters.alpha.opacity = n; } lain { dragDiv.style.opacity = n / 100; }

}, GetZindex: function() { var maxZindex = 0; var divs = document.getElementsByTagName("div"); untuk (z = 0; z maxZindex = Math.max(maxZindex, divs[z].style.zIndex); } kembalikan maxZindex; }, RegDragsPos: function() { var arrDragDivs = new Array(); var dragTbl = document.getElementById("dragTable"); var tmpDiv, tmpPos; untuk (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 }); } } kembalikan arrDragDivs; } }

window.onload = function() { var dragTbl = document.getElementById("dragTable"); jika (Common.getCookie("configArr")) { var configArr = eval("(" Common.getCookie("configArr") ")"); untuk (i = 0; i untuk (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"); Seret baharu("titleBar5", "dragDiv5"); }

window.ounload = function() { var dragTbl = document.getElementById("dragTable"); var configArr = ""; untuk (i = 0; i var tmpStr = ""; untuk (j = 0; j tmpStr = (tmpStr == "" ? "" : ",") "'" dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'"; } configArr = (configArr == "" ? "" : ",") "[" tmpStr "]"; } //format seperti: [['dragDiv3','dragDiv5'], ['dragDiv4','dragDiv1'], ['dragDiv2']] Common.setCookie("configArr", "[" configArr "]"); } .spanDiv{ jawatan:saudara; lebar:5px; ketinggian:5px; }

.dragDiv,.nodragDiv{ jawatan:saudara; penapis:alpha(opacity=100); kelegapan:1; jidar-bawah:6px; warna latar belakang:#FFFFFF; }

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

Kaedah JS untuk meniru modul halaman utama tersuai iGoogle kemahiran seret dan lepas effect_javascript

Artikel berkaitan