Artikel ini menjelaskan metode menyeret dan menjatuhkan efek khusus dari JS yang meniru modul beranda khusus igoogle. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<Title> JS meniru igoogle kustom halaman kustom modul halaman drag dan drop efek </iteme>
<type skrip = "Teks/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) == "objek" && arg0.preventDefault && arg0.stoppropagation)) {
mengembalikan arg0;
}
}
func = func.Caller;
}
kembali nol;
},
getMousepos: function (ev) {
if (! ev) {
EV = this.getEvent ();
}
if (ev.pagex || ev.pagey) {
kembali {
x: ev.pagex,
Y: EV.Pagey
};
}
if (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 if (document.body) {
kembali {
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;
Mengerjakan {
_x += el.offsetleft;
_y += el.offsettop;
} while (el = el.offsetParent);
return {x: _x, y: _y};
},
getitself: function (id) {
mengembalikan "string" == ID typeof? 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: Dokumen. Semua? 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);
},
FirstChild: Function (ParentoBj, TagName) {
if (common.isie) {
return parentobj.firstchild;
}
kalau tidak {
var arr = parentoBj.geteLementsByTagname (tagName);
return arr [0];
}
},
LastChild: Function (ParentoBj, TagName) {
if (common.isie) {
return parentobj.lastchild;
}
kalau tidak {
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 (";");
untuk (var i = 0; i <arrcookie.length; i ++) {
var arr = arrcookie [i] .split ("=");
if (! arr [1]) {
kembali "";
}
if (arr [0] == name) {
return arr [1];
}
}
kembali "";
},
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 (ini, argumen); }
}
}
var drag = class.create ();
Drag.prototype = {
init: function (titlebar, dragDiv, option) {
// Setel apakah klik transparan, default adalah 60% transparan
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};
}
}
kalau tidak {
this.opacity = 60;
}
this.origindragDiv = null;
this.tmpx = 0;
this.tmpy = 0;
this.movable = false;
this.dragArray = [];
var dragobj = ini;
var dragtbl = document.getElementById ("dragtable");
titlebar.onmousedown = function (e) {
var ev = e || window.event || Common.getEvent ();
// Hanya seret dan jatuhkan melalui tombol mouse kiri, yaitu tombol kiri mouse adalah 1 firefox adalah 0
if (common.isie && ev.button == 1 ||! common.isie && ev.button == 0) {
}
kalau tidak {
mengembalikan false;
}
// Perlakukan kasus khusus: Ketika gerakan atas/bawah tidak ditemui, ia kembali ke kolom atas/bawah dari seret awal.
var tmpcolid;
untuk (c = 0; c <dragtbl.rows [0] .cells.length; c ++) {
untuk (k = 0; k <dragtbl.rows [0] .cells [c] .geteLementsbyTagname ("Div"). Panjang; k ++) {
if (dragDiv.id == dragtbl.rows [0] .cells [c] .getElementsbyTagname ("Div") [k] .id) {
tmpcolid = c;
merusak;
}
}
}
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};
// Simpan lokasi saat ini di mana setiap wadah dapat diseret dan dijatuhkan
dragobj.dragarray = dragobj.regdragspos ();
// Masukkan kotak putus -putus
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"; // Kurangi boderwidth untuk menjaga ukuran kotak bertitik konsisten dengan dragdiv
DashedElement.Style.height = dragDiv.OffsetHeight - 2 * parseInt (dashedelement.style.borderwidth) + "px"; // Tambahkan PX untuk memastikan bahwa FF benar
dashedelement.style.position = "relatif";
if (dragDiv.nextsibling) {
dragdiv.parentnode.insertbefore (DashedElement, dragDiv.nextsibling);
}
kalau tidak {
dragdiv.parentnode.appendchild (DashedElement);
}
// itu menjadi mutlak saat menyeret
dragdiv.style.width = dragDiv.OffsetWidth + "px";
dragdiv.style.position = "absolute";
dragobj.movable = 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 ();
} kalau tidak {
window.captureEvents (event.mouseMove);
}
dragobj.setopacity (dragdiv, dragobj.opacity);
// Firefox menghilangkan masalah menyeret dan menjatuhkan gambar di wadah
if (ev.preventdefault) {
ev.preventdefault ();
ev.stoppropagation ();
}
document.onmouseMove = function (e) {
if (dragobj.movable) {
var ev = e || window.event || Common.getEvent ();
// IE menghapus masalah menyeret dan menjatuhkan gambar di wadah
if (document.all) // yaitu
{
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;
untuk (var k = 0; k <dragobj.dragarray.length; k ++) {
if (dragDiv == dragobj.dragarray [i]) {
melanjutkan;
}
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) {
// Pindah ke atas
dashedelement.style.width = targetDiv.offsetWidth - 2 * parseInt (dashedelement.style.borderwidth) + "px";
targetDiv.parentnode.insertbefore (DashedElement, TargetDiv);
}
kalau tidak {
// Pindah ke bawah
dashedelement.style.width = targetDiv.offsetWidth - 2 * parseInt (dashedelement.style.borderwidth) + "px";
if (targetDiv.nextsibling) {
targetDiv.parentnode.insertbefore (DashedElement, targetDiv.nextsibling);
}
kalau tidak {
targetDiv.parentnode.AppendChild (DashedElement);
}
}
}
}
untuk (j = 0; j <dragtbl.rows [0] .cells.length; j ++) {
var starleft = common.getElementPos (dragtbl.rows [0] .cells [j]). x;
if (movepos.x> starleft && movepos.x <startleft + dragtbl.rows [0] .cells [j] .offsetWidth) {
/// kolom tidak memiliki 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);
}
kalau tidak {
var posfirstChild = Common.getElementPos (Common.FirstChild (dragtbl.rows [0] .cells [j], "div"));
var poslastchild = common.getElementPos (Common.LastChild (dragtbl.rows [0] .cells [j], "div"));
// Perlakukan kasus khusus: Ketika gerakan atas/bawah tidak ditemui, ia kembali ke kolom atas/bawah dari seret awal.
var tmpup, tmpown;
if (tmpoBj.colid == j) {
tmpup = tmpobj.firstchildup;
tmpDown = tmpobj.lastchilddown;
}
kalau tidak {
tmpup = posfirstchild.y;
tmpDown = poslastchild.y + common.lastchild (dragtbl.rows [0] .cells [j], "div"). offsetheight;
}
if (movepos.y <tmpup) {/// masukkan kotak putus -putus dari atas
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"));
}
lain if (movepos.y> tmpDown) {/// masukkan kotak putus -putus 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.movable) {
if (common.isie) {
dragdiv.releasecapture ();
}
kalau tidak {
window.releaseEvents (dragdiv.mousemove);
}
dragobj.setopacity (dragdiv, 100);
dragobj.movable = false;
dragobj.tmpx = 0;
dragobj.tmpy = 0;
// Pastikan untuk menulisnya dalam hal ini jika
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;
}
kalau tidak {
dragdiv.style.opacity = n / 100;
}
},
GetZIndex: function () {
var maxzindex = 0;
var divs = document.geteLementsbyTagname ("div");
untuk (z = 0; z <divs.length; z ++) {
MaxzIndex = Math.max (MaxzIndex, Divs [Z] .Style.zindex);
}
return maxzindex;
},
RegDragSpos: function () {
var arrdragdivs = array baru ();
var dragtbl = document.getElementById ("dragtable");
var tmpdiv, tmppos;
untuk (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") + ")");
untuk (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
untuk (j = 0; j <configarr [i] .length; j ++) {
dragtbl.rows [0] .cells [i] .AppendChild (document.getElementById (configarr [i] [j]));
}
}
}
Drag baru ("TitleBar1", "DragDiv1");
Drag baru ("TitleBar2", "DragDiv2");
Drag baru ("TitleBar3", "DragDiv3");
Drag baru ("TitleBar4", "DragDiv4");
Drag baru ("TitleBar5", "DragDiv5");
}
window.onunload = function () {
var dragtbl = document.getElementById ("dragtable");
var configarr = "";
untuk (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
var tmpstr = "";
untuk (j = 0; j <dragtbl.rows [0] .cells [i] .getElementsbyTagname ("Div"). Panjang; j ++) {
tmpstr + = (tmpstr == ""? "": ",") + "'" + dragtbl.rows [0] .cells [i] .getElementsbyTagname ("Div") [j] .id + "'";
}
configArr + = (configArr == ""? "": ",") + "[" + tmpRSTR + "]";
}
// format suka: [['dragDiv3', 'dragDiv5'], ['dragDiv4', 'dragDiv1'], ['dragDiv2']]
Common.setCookie ("configarr", "[" + configarr + "]");
}
</script>
<type style = "text/css">
.spandiv {
Posisi: kerabat;
Lebar: 5px;
Tinggi: 5px;
}
.dragdiv, .nodragdiv {
Posisi: kerabat;
filter: alpha (opacity = 100);
Opacity: 1;
margin-bottom: 6px;
Latar Belakang-Color: #FFFFF;
}
</tyle>
</head>
<body>
<type skrip = "Teks/JavaScript">
</script>
<tabel id = "dragtable" cellpadding = "3" style = "border: solid 0px green; lebar: 98%;">
<tr>
<td valign = "atas">
<Div id = "dragDiv1">
<tabel cellpadding = "0" cellPacing = "0">
<tr id = "titlebar1" style = "tinggi: 22px; teks-align: kiri; latar belakang-warna:#547bc9; warna: putih; padding: 3px; kursor: pindahkan;">>>
<tH align = "kiri" tidak dapat dipilih = "on"> title1 </th>
</tr>
<tr style = "Tinggi: 130px; padding: 3px;" align = "kiri" valign = "atas">
<td tidak dapat dipilih = "on"> Karakter di sini relatif panjang ... Saya di sini ... Cina ... Cina ... asing., Lihat apakah ada overflow! </td>
</tr>
</boable>
</div>
<Div id = "dragDiv2">
<tabel cellpadding = "0" cellPacing = "0">
<tr id = "titlebar2" style = "Tinggi: 22px; Teks-Align: kiri; latar belakang-warna:#547bc9; warna: putih; padding: 3px; kursor: pindahkan;">>
<tH align = "kiri" tidak dapat dipilih = "on"> title2 </th>
</tr>
<tr style = "Tinggi: 130px; padding: 3px;" align = "kiri" valign = "atas">
<td tidak dapat dipilih = "on"> content2 ... </td>
</tr>
</boable>
</div>
</td>
<td valign = "atas">
<Div id = "dragDiv3">
<tabel cellpadding = "0" cellPacing = "0">
<tr id = "titlebar3" style = "tinggi: 22px; teks-align: kiri; latar belakang-warna:#547bc9; warna: putih; padding: 3px; kursor: pindahkan;">>
<tH align = "kiri" tidak dapat dipilih = "on"> title3 </th>
</tr>
<tr style = "Tinggi: 230px; padding: 3px;" align = "kiri" valign = "atas">
<td tidak dapat dipilih = "on"> content3 ... </td>
</tr>
</boable>
</div>
</td>
<td valign = "atas">
<Div id = "dragDiv4">
<tabel cellpadding = "0" cellPacing = "0">
<tr id = "titlebar4" style = "Tinggi: 22px; Teks-Align: kiri; latar belakang-warna:#547bc9; warna: putih; padding: 3px; kursor: pindahkan;">>>
<tH align = "kiri" tidak dapat dipilih = "on"> title4 </th>
</tr>
<tr style = "Tinggi: 130px; padding: 3px;" align = "kiri" valign = "atas">
<td tidak dapat dipilih = "on"> content4 ... </td>
</tr>
</boable>
</div>
<Div id = "dragDiv5">
<tabel cellpadding = "0" cellPacing = "0">
<tr id = "titlebar5" style = "tinggi: 22px; teks-align: kiri; latar belakang-warna:#547bc9; warna: putih; padding: 3px; kursor: pindahkan;">>
<tH align = "kiri" tidak dapat dipilih = "on"> title5 </th>
</tr>
<tr style = "Tinggi: 130px; padding: 3px;" align = "kiri" valign = "atas">
<td tidak dapat dipilih = "on"> konten5 ... </td>
</tr>
</boable>
</div>
</td>
</tr>
</boable>
</body>
</html>
<br> <br> <hr> dikumpulkan di internet, hanya untuk pertukaran minat dan pembelajaran, dan bukan untuk tujuan komersial. </font> </p>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.