บทความนี้อธิบายถึงวิธีการลากและทิ้งเอฟเฟกต์พิเศษของ JS เลียนแบบ Igoogle Homepage โมดูล แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js เลียนแบบ Igoogle โมดูลโฮมเพจที่กำหนดเองลากและปล่อยเอฟเฟกต์ </title>
<script type = "text/javascript">
var Common = {
getEvent: function () {// ie/ff
if (document.all) {
กลับไปที่หน้าต่าง event;
-
func = getEvent.Caller;
ในขณะที่ (func! = null) {
var arg0 = func.arguments [0];
ถ้า (arg0) {
if ((arg0.constructor == เหตุการณ์ || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventdefault && arg0.stoppropagation)) {
กลับ arg0;
-
-
func = func.caller;
-
คืนค่า null;
-
getMousepos: ฟังก์ชั่น (ev) {
ถ้า (! 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
-
-
อื่นถ้า (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;
} ในขณะที่ (el = el.offsetParent);
return {x: _x, y: _y};
-
getItself: function (id) {
กลับ "สตริง" == typeof 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: function (parentobj, tagname) {
ถ้า (Common.isie) {
ส่งคืน parentobj.firstchild;
-
อื่น {
var arr = parentobj.getElementByTagname (tagname);
return arr [0];
-
-
LastChild: function (parentobj, tagname) {
ถ้า (Common.isie) {
ส่งคืน parentobj.lastchild;
-
อื่น {
var arr = parentobj.getElementByTagname (tagname);
return arr [arr.length - 1];
-
-
SetCookie: ฟังก์ชั่น (ชื่อ, ค่า) {
document.cookie = name + "=" + value;
-
getCookie: ฟังก์ชั่น (ชื่อ) {
var strcookie = document.cookie;
var arrcookie = strcookie.split (";");
สำหรับ (var i = 0; i <arrcookie.length; i ++) {
var arr = arrcookie [i] .split ("=");
ถ้า (! arr [1]) {
กลับ "";
-
if (arr [0] == ชื่อ) {
return arr [1];
-
-
กลับ "";
-
Delcookie: ฟังก์ชั่น (ชื่อ) {
var exp = วันที่ใหม่ ();
exp.settime (exp.getTime () - 1);
var cval = this.getCookie (ชื่อ);
if (cval! = null) document.cookie = name + "=" + cval + "; expires =" + exp.togmtstring ();
-
-
var class = {
สร้าง: function () {
return function () {this.init.apply (สิ่งนี้, อาร์กิวเมนต์); -
-
-
var drag = class.create ();
drag.prototype = {
init: function (titlebar, dragdiv, ตัวเลือก) {
// ตั้งค่าว่าการคลิกมีความโปร่งใสค่าเริ่มต้นคือ 60% โปร่งใส
titlebar = common.getItself (titlebar);
dragdiv = Common.getItself (dragdiv);
this.dragarea = {maxleft: -9999, maxright: 9999, maxtop: -9999, maxbottom: 9999};
ถ้า (ตัวเลือก) {
this.Opacity = opotions.opacity? (isnan (parseint (ตัวเลือกความเป็นไปได้))? 100: ParseInt (ตัวเลือกความเป็นไปได้)): 100;
if (opptionss.area) {
if (options.area.left &&! isnan (parseInt (optopps.area.left))) {this.dragarea.maxleft = opotions.area.left};
if (options.area.right &&! isnan (parseInt (opotions.area.right))) {this.dragarea.maxright = opotions.area.right};
if (options.area.top &&! isnan (parseint (opotions.area.top))) {this.dragarea.maxtop = opotions.area.top};
if (options.area.bottom &&! isnan (parseInt (opotions.area.bottom))) {this.dragarea.maxbottom = opotions.area.bottom};
-
-
อื่น {
this.Opacity = 60;
-
this.origindragdiv = null;
this.tmpx = 0;
this.tmpy = 0;
this.moveable = false;
this.dragarray = [];
var dragobj = this;
var dragtbl = 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) {
-
อื่น {
กลับเท็จ;
-
// รักษากรณีพิเศษ: เมื่อไม่พบการย้ายบน/ล่างมันจะกลับไปที่คอลัมน์ด้านบน/ล่างของการลากเริ่มต้น
var tmpcolid;
สำหรับ (c = 0; c <dragtbl.rows [0] .cells.length; c ++) {
สำหรับ (k = 0; k <dragtbl.rows [0] .cells [c] .getElementsByTagname ("div"). ความยาว; k ++) {
if (dragdiv.id == dragtbl.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")
// บันทึกตำแหน่งปัจจุบันที่แต่ละคอนเทนเนอร์สามารถลากและลดลงได้
dragobj.dragarray = dragobj.regdragspos ();
// แทรกกล่องประ
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"; // ลบ boderwidth เพื่อให้ขนาดกล่องประสอดคล้องกับ dragdiv
dashedElement.style.height = dragdiv.offSetheight - 2 * ParseInt (DashedElement.style.BorderWidth) + "PX"; // เพิ่ม px เพื่อให้แน่ใจว่า FF ถูกต้อง
dashedElement.style.position = "ญาติ";
if (dragdiv.nextsibling) {
dragdiv.parentnode.insertbefore (dashedelement, 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;
ถ้า (Common.isie) {
dragdiv.setCapture ();
} อื่น {
window.captureevents (event.mousemove);
-
dragobj.setOpacity (dragdiv, dragobj.Opacity);
// Firefox ลบปัญหาการลากและวางรูปภาพลงในภาชนะ
if (ev.preventdefault) {
ev.preventdefault ();
ev.stoppropagation ();
-
document.onmousemove = function (e) {
if (dragobj.moveable) {
var ev = e || window.event || Common.getEvent ();
// เช่นลบปัญหาการลากและวางรูปภาพลงในภาชนะ
if (document.all) // เช่น
-
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;
สำหรับ (var k = 0; k <dragobj.dragarray.length; k ++) {
if (dragdiv == dragobj.dragarray [i]) {
ดำเนินการต่อ;
-
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) {
// เลื่อนขึ้น
dashedElement.style.width = targetDiv.OffSetWidth - 2 * ParseInt (dashedElement.style.BorderWidth) + "PX";
TargetDiv.parentNode.insertBefore (DashedElement, TargetDiv);
-
อื่น {
// เลื่อนลง
dashedElement.style.width = targetDiv.OffSetWidth - 2 * ParseInt (dashedElement.style.BorderWidth) + "PX";
if (targetdiv.nextsibling) {
TargetDiv.parentNode.insertBefore (DashedElement, TargetDiv.nextSibling);
-
อื่น {
TargetDiv.ParentNode.AppendChild (DashEdElement);
-
-
-
-
สำหรับ (j = 0; j <dragtbl.rows [0] .cells.length; j ++) {
var startleft = common.getElementPos (dragtbl.rows [0] .cells [j]). x;
if (movepos.x> startleft && movepos.x <startleft + dragtbl.rows [0] .cells [j] .offsetWidth) {
/// คอลัมน์ไม่มี div
if (dragtbl.rows [0] .cells [j] .getElementsByTagname ("div"). ความยาว == 0) {
dashedElement.style.width = dragtbl.rows [0] .cells [j] .offsetWidth - 2 * parseInt (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"));
// รักษากรณีพิเศษ: เมื่อไม่พบการย้ายบน/ล่างมันจะกลับไปที่คอลัมน์ด้านบน/ล่างของการลากเริ่มต้น
var tmpup, tmpdown;
if (tmpoBj.colid == j) {
tmpup = tmpoBj.firstchildup;
tmpdown = tmpoBj.lastchilddown;
-
อื่น {
tmpup = posfirstchild.y;
TMPDOWN = POSLASTCHILD.Y + Common.lastChild (dragtbl.rows [0] .cells [j], "div"). Offsetheight;
-
if (movepos.y <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"));
-
อื่นถ้า (movepos.y> tmpdown) {/// แทรกกล่องประจากด้านล่าง
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) {
ถ้า (Common.isie) {
dragdiv.releasecapture ();
-
อื่น {
window.releaseevents (dragdiv.mousemove);
-
dragobj.setOpacity (dragdiv, 100);
dragobj.moveable = false;
dragobj.tmpx = 0;
dragobj.tmpy = 0;
// อย่าลืมเขียนไว้ในนี้หาก
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) {
ถ้า (Common.isie) {
dragdiv.filters.alpha.Opacity = n;
-
อื่น {
dragdiv.style.Opacity = n / 100;
-
-
getzindex: function () {
var maxzindex = 0;
var divs = document.getElementsByTagname ("div");
สำหรับ (z = 0; z <divs.length; z ++) {
maxzIndex = math.max (MaxzIndex, divs [z] .style.zindex);
-
กลับ Maxzindex;
-
regdragspos: function () {
var arrdragdivs = new Array ();
var dragtbl = document.getElementById ("dragtable");
var tmpdiv, tmppos;
สำหรับ (i = 0; i <dragtbl.getElementsByTagname ("div"). ความยาว; 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") + ")");
สำหรับ (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
สำหรับ (j = 0; j <configarr [i] .length; j ++) {
dragtbl.rows [0] .cells [i] .appendchild (document.getElementById (configarr [i] [j]));
-
-
-
การลากใหม่ ("titlebar1", "dragdiv1");
การลากใหม่ ("titlebar2", "dragdiv2");
การลากใหม่ ("titlebar3", "dragdiv3");
การลากใหม่ ("titlebar4", "dragdiv4");
การลากใหม่ ("titlebar5", "dragdiv5");
-
window.onunload = function () {
var dragtbl = document.getElementById ("dragtable");
var configarr = "";
สำหรับ (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
var tmpstr = "";
สำหรับ (j = 0; j <dragtbl.rows [0] .cells [i] .getElementsByTagname ("div"). ความยาว; j ++) {
TMPSTR + = (tmpStr == ""? "": ",") + "'" + dragtbl.rows [0] .cells [i] .getElementsByTagname ("div") [j] .id + "";
-
configarr + = (configarr == ""? "": ",") + "[" + tmpstr + "]";
-
// รูปแบบเช่น: [['dragdiv3', 'dragdiv5'], ['dragdiv4', 'dragdiv1'], ['dragdiv2']]]]]
Common.setCookie ("configarr", "[" + configarr + "]");
-
</script>
<style type = "text/css">
.Spandiv {
ตำแหน่ง: ญาติ;
ความกว้าง: 5px;
ความสูง: 5px;
-
.dragdiv, .nodragdiv {
ตำแหน่ง: ญาติ;
ตัวกรอง: อัลฟ่า (ความทึบ = 100);
ความทึบ: 1;
มาร์จิ้น-ก้น: 6px;
พื้นหลังสี: #FFFFF;
-
</style>
</head>
<body>
<script type = "text/javascript">
</script>
<table id = "dragtable" cellpadding = "3" style = "Border: Solid 0px Green; ความกว้าง: 98%;">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar1" style = "ความสูง: 22px; text-allign: ซ้าย; พื้นหลังสี:#547bc9; สี: สีขาว; padding: 3px; เคอร์เซอร์: ย้าย;">
<th align = "left" unselectable = "on"> title1 </th>
</tr>
<tr style = "ความสูง: 130px; padding: 3px;" Align = "left" valign = "top">
<td unselectable = "on"> ตัวละครที่นี่ค่อนข้างยาว ... ฉันอยู่ที่นี่ ... จีน ... จีน ... ต่างประเทศดูว่ามีการล้นหรือไม่! </td>
</tr>
</table>
</div>
<div id = "dragdiv2">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar2" style = "ความสูง: 22px; text-allign: ซ้าย; พื้นหลังสี:#547bc9; สี: สีขาว; padding: 3px; เคอร์เซอร์: ย้าย;">
<th align = "left" unselectable = "on"> title2 </th>
</tr>
<tr style = "ความสูง: 130px; padding: 3px;" Align = "left" valign = "top">
<td unselectable = "on"> content2 ... </td>
</tr>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv3">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar3" style = "ความสูง: 22px; text-allign: ซ้าย; พื้นหลังสี:#547bc9; สี: สีขาว; padding: 3px; เคอร์เซอร์: ย้าย;">
<th align = "left" unselectable = "on"> title3 </th>
</tr>
<tr style = "ความสูง: 230px; padding: 3px;" Align = "left" valign = "top">
<td unselectable = "on"> content3 ... </td>
</tr>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv4">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar4" style = "ความสูง: 22px; text-allign: ซ้าย; พื้นหลังสี:#547bc9; สี: สีขาว; padding: 3px; เคอร์เซอร์: ย้าย;">
<th align = "left" unselectable = "on"> title4 </th>
</tr>
<tr style = "ความสูง: 130px; padding: 3px;" Align = "left" valign = "top">
<td unselectable = "on"> content4 ... </td>
</tr>
</table>
</div>
<div id = "dragdiv5">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar5" style = "ความสูง: 22px; text-allign: ซ้าย; พื้นหลังสี:#547bc9; สี: สีขาว; padding: 3px; เคอร์เซอร์: ย้าย;">
<th align = "left" unselectable = "on"> title5 </th>
</tr>
<tr style = "ความสูง: 130px; padding: 3px;" Align = "left" valign = "top">
<td unselectable = "on"> content5 ... </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
<br> <br> <hr> รวบรวมบนอินเทอร์เน็ตเพื่อแลกเปลี่ยนความสนใจและการเรียนรู้เท่านั้นและไม่ใช่เพื่อวัตถุประสงค์ทางการค้า </font> </p>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน