В этой статье описывается метод перетаскивания и сброса специальных эффектов JS, имитирующего модуль домашней страницы Igoogle. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<TILE> JS Имитирует Igoogle Custom Home Page Module модуль перетаскивания </title>
<script type = "text/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) == "Object" && arg0.preventdefault && arg0.stoppropagation)) {
вернуть arg0;
}
}
func = func.caller;
}
вернуть ноль;
},
getMousePos: function (ev) {
if (! 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
};
}
иначе if (document.body) {
возвращаться {
X: ev.clientx + document.body.scrollleft - document.body.clientleft,
y: ev.clienty + document.body.scrolltop - document.body.clienttop
};
}
},
getElementPos: function (el) {
el = this.getishing (el);
var _x = 0, _y = 0;
делать {
_x += el.offsetleft;
_y += el.offsettop;
} while (el = el.offsetParent);
return {x: _x, y: _y};
},
getItself: function (id) {
вернуть "String" == TypeOF ID? document.getElementbyId (id): id;
},
getViewPortsize: {w: (window.innerwidth)? window.innerwidth: (document.documentelement && document.documentelement.clientwidth)? document.documentelement.clientwidth: (document.body? Document.fofsetwidth: 0), h: (window.innerheight)? window.innerheight: (document.documentelement && document.documentelement.clientHeight)? document.documentelement.clientHeight: (document.body? Document.body.offsetheight: 0)},
ISIE: документ. Все? Верно: ложь,
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);
return arr [arr.length - 1];
}
},
setCookie: function (name, value) {
document.cookie = name + "=" + value;
},
getCookie: function (имя) {
var strcookie = document.cookie;
var arrcookie = strcookie.split (";");
для (var i = 0; i <arrcookie.length; i ++) {
var arr = arrcookie [i] .split ("=");
if (! arr [1]) {
возвращаться "";
}
if (arr [0] == name) {
return arr [1];
}
}
возвращаться "";
},
Delcookie: function (имя) {
var exp = new Date ();
exp.settime (exp.gettime () - 1);
var cval = this.getCookie (имя);
if (cval! = null) document.cookie = name + "=" + cval + "; expires =" + exp.togmtstring ();
}
}
var class = {
create: function () {
return function () {this.init.apply (this, аргументы); }
}
}
var drag = class.create ();
Drag.prototype = {
init: функция (TitleBar, DragDiv, Options) {
// Установить, прозрачны ли клики, по умолчанию прозрачны на 60%
TitleBar = common.GetIff Self (TitleBar);
dragdiv = common.getishing (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};
}
}
еще {
this.opacity = 60;
}
this.origindragdiv = null;
this.tmpx = 0;
this.tmpy = 0;
this.movable = 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;
for (c = 0; c <dragtbl.rows [0] .cells.length; c ++) {
for (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] .cells [tmpcolid], «div»). Offsetheight};
// Сохранить текущее местоположение, где каждый контейнер можно перетаскивать и сбросить
dragobj.dragarray = dragobj.regdragspos ();
// вставить пунктирную коробку
var dephedElement = document.createElement ("div");
dephedelement.style.csstext = dragdiv.style.csstext;
dephedelement.style.border = "пунктир 2PX #AAA";
DephedElement.Style.marginBottom = "6px";
dephedelement.style.width = dragdiv.offsetwidth - 2 * parseint (dephedelement.style.borderwidth) + "px"; // Вычтите прогибу Бодер, чтобы поддерживать размер пунктирной коробки в соответствии с Dragdiv
dephedelement.style.height = dragdiv.offsetheight - 2 * parseint (dephedelement.style.borderwidth) + "px"; // Добавить PX, чтобы убедиться, что FF верен
DephedElement.Style.position = "относительный";
if (dragdiv.nextibling) {
dragdiv.parentnode.insertbefore (dephedelement, dragdiv.nextibling);
}
еще {
dragdiv.parentnode.appendchild (dephedelement);
}
// это становится абсолютным при перетаскивании
dragdiv.style.width = dragdiv.offsetwidth + "px";
dragdiv.style.position = "Absolute";
dragobj.movable = true;
dragdiv.style.zindex = dragobj.getzindex () + 1;
var downpos = common.getmouseepos (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.movable) {
var ev = e || Window.event || Common.getEvent ();
// т.е. удаляет проблему перетаскивания и сбрасывания изображений в контейнере
if (document.all) // т.е.
{
ev.returnvalue = false;
}
var movepos = common.getmouseepos (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;
for (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].
) {
targetdiv = document.getElementbyid (dragobj.dragarray [k] .dragid);
if (movepos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight / 2) {
// двигаться вверх
dephedelement.style.width = targetdiv.offsetwidth - 2 * parseint (dephedelement.style.borderwidth) + "px";
targetdiv.parentnode.insertbefore (dephedelement, targetdiv);
}
еще {
// двигаться вниз
dephedelement.style.width = targetdiv.offsetwidth - 2 * parseint (dephedelement.style.borderwidth) + "px";
if (targetdiv.nextibling) {
targetdiv.parentnode.insertbefore (dephedelement, targetdiv.nextibling);
}
еще {
targetdiv.parentnode.appendchild (dephedelement);
}
}
}
}
for (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) {
/// В столбце нет дивирования
if (dragtbl.rows [0] .cells [j] .getelementsbytagname ("div"). Длина == 0) {
dephedelement.style.width = dragtbl.rows [0] .cells [j] .offsetwidth - 2 * parseint (dephedelement.style.borderwidth) + "px";
dragtbl.rows [0] .cells [j] .appendchild (dephedelement);
}
еще {
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) {/// Вставьте пунктирную коробку с вершины
dephedelement.style.width = common.firstchild (dragtbl.rows [0] .cells [j], "div"). Offsetwidth - 2 * parseint (dephedelement.style.borderwidth) + "px";
dragtbl.rows [0] .cells [j] .insertbefore (dephedelement, common.firstchild (dragtbl.rows [0] .cells [j], "div"));
}
else if (movepos.y> tmpdown) {//// Вставить пунктирную коробку снизу
dephedelement.style.width = common.lastchild (dragtbl.rows [0] .cells [j], "div"). Offsetwidth - 2 * parseint (dephedelement.style.borderwidth) + "px";
dragtbl.rows [0] .cells [j] .appendchild (dephedelement);
}
}
}
}
}
};
document.onmouseup = function () {
if (dragobj.movable) {
if (common.isie) {
Dragdiv.ReleaseCapture ();
}
еще {
window.releaseevents (dragdiv.mouseMove);
}
dragobj.setopacity (dragdiv, 100);
dragobj.movable = false;
dragobj.tmpx = 0;
dragobj.tmpy = 0;
// Обязательно напишите это в этом, если
dragdiv.style.left = "";
dragdiv.style.top = "";
dragdiv.style.width = "";
dragdiv.style.position = "";
dephedelement.parentnode.insertbefore (dragdiv, dephedelement);
dephedelement.parentnode.removechild (dephedelement);
}
};
}
},
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");
for (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;
for (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});
}
}
возврат Arrdragdivs;
}
}
window.onload = function () {
var dragtbl = document.getElementById ("Dragtable");
if (common.getCookie ("configArr")) {
var configarr = eval ("(" + common.getCookie ("configArr") + ")");
for (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
for (j = 0; j <configarr [i] .length; j ++) {
dragtbl.rows [0] .cells [i] .appendchild (document.getElementById (configArr [i] [j]));
}
}
}
Новое Drag ("TitleBar1", "DragDiv1");
Новое перетаскивание ("TitleBar2", "DragDiv2");
Новое Drag ("TitleBar3", "DragDiv3");
Новое Drag ("TitleBar4", "DragDiv4");
Новое перетаскивание ("TitleBar5", "DragDiv5");
}
window.onunload = function () {
var dragtbl = document.getElementById ("Dragtable");
var configarr = "";
for (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
var tmpstr = "";
for (j = 0; j <dragtbl.rows [0] .cells [i] .getelementsbytagname ("div"). Length; 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>
<стиль типа = "text/css">
.spandiv {
позиция: относительно;
Ширина: 5px;
Высота: 5px;
}
.dragdiv, .nodragdiv {
позиция: относительно;
Фильтр: альфа (непрозрачность = 100);
непрозрачность: 1;
маржинальный бат: 6px;
фоновый цвет: #fffff;
}
</style>
</head>
<тело>
<script type = "text/javascript">
</script>
<Таблица ID = "Dragtable" cellPadding = "3" style = "Граница: твердый 0px green; ширина: 98%;">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<таблица cellpadding = "0" cellpacing = "0">
<tr id = "titebar1" style = "Высота: 22px; текст-аллект: слева; фоновый цвет:#547bc9; цвет: белый; прокладка: 3px; cursor: move;">
<th Align = "Left" Unselectable = "on"> title1 </th>
</tr>
<tr style = "Высота: 130px; прокладка: 3px;" align = "Left" valign = "top">
<td onlectectable = "on"> персонажи здесь относительно длинные ... Я здесь ... Китай ... Китай ... иностранный., Посмотрите, есть ли переполнение! </td>
</tr>
</table>
</div>
<div id = "dragdiv2">
<таблица cellpadding = "0" cellpacing = "0">
<tr id = "titebar2" style = "Высота: 22px; текстовый Align: left; фоновый цвет:#547bc9; цвет: белый; прокладка: 3px; cursor: move;">
<th Align = "Left" Unselectable = "on"> title2 </th>
</tr>
<tr style = "Высота: 130px; прокладка: 3px;" align = "Left" valign = "top">
<td unselectable = "on"> content2 ... </td>
</tr>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv3">
<таблица cellpadding = "0" cellpacing = "0">
<tr id = "titebar3" style = "Высота: 22px; текст-аллект: слева; фоновый цвет:#547bc9; цвет: белый; прокладка: 3px; cursor: move;">
<th Align = "Left" Unselectable = "on"> title3 </th>
</tr>
<tr style = "Высота: 230px; прокладка: 3px;" align = "Left" valign = "top">
<td unselectable = "on"> content3 ... </td>
</tr>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv4">
<таблица cellpadding = "0" cellpacing = "0">
<tr id = "titlebar4" style = "Высота: 22px; текст-аллект: слева; фоновый цвет:#547bc9; цвет: белый; прокладка: 3px; cursor: move;">
<th Align = "Left" Unselectable = "on"> title4 </th>
</tr>
<tr style = "Высота: 130px; прокладка: 3px;" align = "Left" valign = "top">
<td unselectable = "on"> content4 ... </td>
</tr>
</table>
</div>
<div id = "dragdiv5">
<таблица cellpadding = "0" cellpacing = "0">
<tr id = "titlebar5" style = "Высота: 22px; текст-алюна: слева; фоновый цвет:#547bc9; цвет: белый; прокладка: 3px; cursor: move;">
<th Align = "Left" Unselectable = "on"> title5 </th>
</tr>
<tr style = "Высота: 130px; прокладка: 3px;" align = "Left" valign = "top">
<td unselectable = "on"> content5 ... </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
<br> <br> <hr> собрался в Интернете, только для обмена интересами и обучением, а не для коммерческих целей. </font> </p>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.