تصف هذه المقالة طريقة سحب وإسقاط المؤثرات الخاصة لـ JS تقليص وحدة الصفحة الرئيسية Igoogle المخصصة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> JS Imitate Igoogle Mome Page Home Module Drage and Drop Effect </title>
<script type = "text/javaScript">
var common = {
getEvent: function () {// ie/ff
if (document.all) {
إرجاع نافذة.
}
func = getevent.caller ؛
بينما (func! = null) {
var arg0 = funC.Arguments [0] ؛
إذا (arg0) {
if ((arg0.constructor == event || arg0.constructor == mouseevent) || (typeof (arg0) == "object"
إرجاع Arg0 ؛
}
}
func = func.caller ؛
}
العودة لاغية.
} ،
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) ؛
إرجاع {x: _x ، y: _y} ؛
} ،
الحصول على نفسه: وظيفة (معرف) {
إرجاع "سلسلة" == نوع معرف؟ 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: 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) {
إرجاع parentobj.firstchild ؛
}
آخر {
var arr = parentobj.getElementsByTagName (tagName) ؛
إرجاع arr [0] ؛
}
} ،
LastChild: Function (ParentObj ، TagName) {
if (common.isie) {
إرجاع parentobj.lastchild ؛
}
آخر {
var arr = parentobj.getElementsByTagName (tagName) ؛
إرجاع arr [arr.length - 1] ؛
}
} ،
setCookie: وظيفة (الاسم ، القيمة) {
document.cookie = name + "=" + value ؛
} ،
getCookie: Function (name) {
var strocookie = document.cookie ؛
var arrcookie = strocookie.split ("؛") ؛
لـ (var i = 0 ؛ i <arrcookie.length ؛ i ++) {
var arr = arrcookie [i] .split ("=") ؛
if (! arr [1]) {
يعود ""؛
}
if (arr [0] == name) {
إرجاع arr [1] ؛
}
}
يعود ""؛
} ،
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 = {
إنشاء: function () {
return function () {this.init.apply (هذا ، الحجج) ؛ }
}
}
var drag = 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} ؛
إذا (الخيارات) {
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} ؛
}
}
آخر {
this.Opacity = 60 ؛
}
this.origindragdiv = null ؛
this.tmpx = 0 ؛
this.tmpy = 0 ؛
this.moveable = false ؛
this.dragarray = [] ؛
var dragobj = هذا ؛
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"). length ؛ 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].
// احفظ الموقع الحالي حيث يمكن سحب كل حاوية وإسقاطها
dragobj.dragarray = dragobj.regdragspos () ؛
// أدخل المربع المنقط
var dashedelement = document.createElement ("div") ؛
DasheDelement.style.csstext = dragdiv.style.csstext ؛
DheadElement.Style.Border = "Suted 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 صحيح
DeghedElement.Style.position = "النسبية" ؛
if (dragdiv.nextsibling) {
dragdiv.parentnode.insertbefore (DasheDelement ، dragdiv.nextsibling) ؛
}
آخر {
dragdiv.parentnode.appendChild (DistedElement) ؛
}
// يصبح مطلقة عند السحب
dragdiv.style.width = dragdiv.offsetWidth + "px" ؛
DragDiv.Style.position = "absolute" ؛
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 () ؛
} آخر {
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 () ؛
// IE يزيل مشكلة سحب وإسقاط الصور في الحاوية
إذا (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 <ragoBj.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) {
// تحرك
TheDeDelement.style.width = targetdiv.offsetWidth - 2 * parseint (DasheDelement.style.borderwidth) + "px" ؛
TargetDiv.ParentNode.InserTbefore (DistedElement ، TargetDiv) ؛
}
آخر {
// تحرك لأسفل
TheDeDelement.style.width = targetdiv.offsetWidth - 2 * parseint (DasheDelement.style.borderwidth) + "px" ؛
if (targetdiv.nextsibling) {
TargetDiv.ParentNode.InserTbefore (DasheDelement ، TargetDiv.Nextsibling) ؛
}
آخر {
TargetDiv.ParentNode.AppendChild (DistedElement) ؛
}
}
}
}
لـ (j = 0 ؛ j <dragtbl.rows [0] .Cells.Length ؛ j ++) {
var startLeft = common.getElementPos (dragtbl.Rows [0] .Cells [j]). x ؛
if (movepos.x> starleft && movelpos.x <startLeft + DragTbl.Rows [0]
/// العمود ليس لديه 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 (DiadedElement) ؛
}
آخر {
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].
}
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 (DistedElement ، common.firstchild (dragtbl.Rows [0] .Cells [j] ، "div")) ؛
}
آخر إذا (movepos.y> tmpdown) {/// أدخل المربع المنقط من الأسفل
TheDeDelement.Style.Width = common.lastchild (dragtbl.Rows [0] .Cells [j] ، "div"). OffsetWidth - 2 * parseint (dashedelement.style.borderwidth) + "px" ؛
dragtbl.Rows [0] .Cells [j] .AppendChild (DiadedElement) ؛
}
}
}
}
}
} ؛
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 ؛
// تأكد من كتابته في هذا إذا
dragdiv.style.left = "" ؛
dragdiv.style.top = "" ؛
dragdiv.style.width = "" ؛
dragdiv.style.position = "" ؛
DasheDelement.ParentNode.InsertBefore (DragDiv ، DasheDelement) ؛
DeghedElement.ParentNode.removechild (DiadedElement) ؛
}
} ؛
}
} ،
setOpacity: function (dragdiv ، n) {
if (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])) ؛
}
}
}
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 = "" ؛
لـ (i = 0 ؛ i <dragtbl.rows [0] .Cells.Length ؛ i ++) {
var tmpstr = "" ؛
لـ (j = 0 ؛ j <dragtbl.rows [0]. cells [i] .getElementsByTagName ("div"). length ؛ j ++) {
TMPSTR + = (TMPSTR == ""؟ "": "،") + "" + dragtbl.Rows [0] .cells [i] .getElementsByTagName (
}
configarr + = (configarr == ""؟ "": "،") + "[" + TMPSTR + "]" ؛
}
// تنسيق مثل: [['dragdiv3' ، 'dragdiv5'] ، ['dragdiv4' ، 'dragdiv1] ، [' dragdiv2 ']]
common.setCoOkie ("configarr" ، "[" + configarr + "]") ؛
}
</script>
<type type = "text/css">
.spandiv {
الموقف: قريب
العرض: 5px ؛
الارتفاع: 5 بكسل ؛
}
.dragdiv ، .nodragdiv {
الموقف: قريب
مرشح: ألفا (التعتيم = 100) ؛
العتامة: 1 ؛
هامش القاع: 6px ؛
خلفية اللون: #fffff ؛
}
</style>
</head>
<body>
<script type = "text/javaScript">
</script>
<table id = "dragtable" cellpadding = "3" style = "الحدود: صلبة 0px أخضر ؛ العرض: 98 ٪ ؛">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar1" style = "الارتفاع: 22px ؛ محاذاة النص: يسار ؛ خلفية اللون:#547bc9 ؛ اللون: أبيض ؛ حشو: 3px ؛ المؤشر: نقل ؛">
<th align = "Left" غير قابل للتكيف = "on"> title1 </h>
</r>
<tr style = "الارتفاع: 130 بكسل ؛ الحشو: 3px ؛" محاذاة = "اليسار" valign = "top">
<td unlecectable = "on"> الشخصيات هنا طويلة نسبيًا ...
</r>
</table>
</div>
<div id = "dragdiv2">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar2" style = "الارتفاع: 22px ؛ محاذاة النص: اليسار ؛ الخلفية اللون:#547bc9 ؛ اللون: أبيض ؛ حشو: 3px ؛ المؤشر: نقل ؛">>
<th align = "Left" غير قابل للتكيف = "ON"> title2 </h>
</r>
<tr style = "الارتفاع: 130 بكسل ؛ الحشو: 3px ؛" محاذاة = "اليسار" valign = "top">
<td unlecectable = "on"> content2 ... </td>
</r>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv3">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar3" style = "الارتفاع: 22px ؛ محاذاة النص: اليسار ؛ الخلفية اللون:#547bc9 ؛ اللون: أبيض ؛ الحشو: 3px ؛ المؤشر: نقل ؛">
<th align = "Left" غير قابل للتكيف = "ON"> title3 </h>
</r>
<tr style = "الارتفاع: 230px ؛ الحشو: 3px ؛" محاذاة = "اليسار" valign = "top">
<td unlecectable = "on"> content3 ... </td>
</r>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv4">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar4" style = "الارتفاع: 22px ؛ محاذاة النص: يسار ؛ خلفية اللون:#547bc9 ؛ اللون: أبيض ؛ حشو: 3px ؛ المؤشر: نقل ؛">>
<th align = "left" غير قابل للتكيف = "on"> title4 </h>
</r>
<tr style = "الارتفاع: 130 بكسل ؛ الحشو: 3px ؛" محاذاة = "اليسار" valign = "top">
<td unlecectable = "on"> content4 ... </td>
</r>
</table>
</div>
<div id = "dragdiv5">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar5" style = "الارتفاع: 22px ؛ محاذاة النص: يسار ؛ خلفية اللون:#547bc9 ؛ اللون: أبيض ؛ حشو: 3px ؛ المؤشر: نقل ؛">>
<th align = "Left" غير قابل للتكيف = "on"> title5 </h>
</r>
<tr style = "الارتفاع: 130 بكسل ؛ الحشو: 3px ؛" محاذاة = "اليسار" valign = "top">
<td unlecectable = "on"> content5 ... </td>
</r>
</table>
</div>
</td>
</r>
</table>
</body>
</html>
<br> <br> <br> <hr> تم جمعها على الإنترنت ، فقط لتبادل المصالح والتعلم ، وليس لأغراض تجارية. </font> </p>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.