Este artigo descreve o método de arrastar e soltar efeitos especiais do JS imitando o módulo de página inicial do igoogle. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS imita o módulo de página inicial do igoogle personalizado e efeito de arrastar e soltar </ititure>
<script type = "text/javascript">
var comum = {
getEvent: function () {// ie/ff
if (document.all) {
retornar janela.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)) {
retornar arg0;
}
}
func = func.caller;
}
retornar nulo;
},
getMousePos: function (ev) {
if (! Ev) {
EV = this.Getevent ();
}
if (ev.pagex || ev.pagey) {
retornar {
x: ev.pagex,
Y: Ev.Pagey
};
}
if (document.documentElement && document.documentElement.scrolltop) {
retornar {
x: ev.clientx + document.documentElement.scrollleft - document.documentElement.clientleft,
y: ev.clienty + document.documentElement.scrolltop - document.documentElement.clienttop
};
}
else if (document.body) {
retornar {
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;
fazer {
_x += el.offsetleft;
_y += el.offsettop;
} while (el = el.offsetParent);
return {x: _x, y: _y};
},
Getitself: function (id) {
Retornar "String" == TypeOf ID? document.getElementById (id): id;
},
getViewportSize: {w: (window.innerwidth)? window.innerwidth: (document.documentElement && document.documentElement.clientwidth)? document.documentElement.clientWidth: (document.body? window.innerHeight: (document.documentElement && document.documentElement.clientHeight)? document.documentElement.clientHeight: (document.body?
Isie: document.all? Verdadeiro: falso,
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 (parenteBJ, tagname) {
if (Common.isie) {
retornar parentebj.firstchild;
}
outro {
var arr = parapromobj.getElementsByTagName (tagname);
retornar arr [0];
}
},
LastChild: function (parentobj, tagname) {
if (Common.isie) {
retornar parentebj.lastchild;
}
outro {
var arr = parapromobj.getElementsByTagName (tagname);
Retornar arr [arr.length - 1];
}
},
setcookie: function (nome, valor) {
document.cookie = nome + "=" + valor;
},
getCookie: function (nome) {
var strcookie = document.cookie;
var arrcookie = strcookie.split (";");
for (var i = 0; i <arrcookie.length; i ++) {
var arr = arrcookie [i] .split ("=");
if (! arr [1]) {
retornar "";
}
if (arr [0] == nome) {
retornar arr [1];
}
}
retornar "";
},
delcookie: function (nome) {
var exp = new Date ();
Exp.SetTime (Exp.getTime () - 1);
var cval = this.getCookie (nome);
if (cval! = null) document.cookie = nome + "=" + cval + "; expires =" + exp.togmtString ();
}
}
var class = {
Criar: function () {
return function () {this.init.apply (this, argumentos); }
}
}
var drag = class.create ();
Drag.prototype = {
init: function (titlebar, dragdiv, opções) {
// Defina se os cliques são transparentes, o padrão é 60% transparente
TitleBar = Common.getitself (TitleBar);
dragdiv = Common.getitself (dragdiv);
this.dragarea = {maxleft: -9999, maxright: 9999, maxtop: -9999, maxbottom: 9999};
if (options) {
this.Opacity = Option.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};
}
}
outro {
this.Opacity = 60;
}
this.origindragdiv = null;
this.tmpx = 0;
this.tmpy = 0;
this.movable = false;
this.draGarray = [];
var dragobj = this;
var dragtbl = document.getElementById ("dragtable");
titlebar.onmousedown = function (e) {
var ev = e || Window.Event || Common.Getevent ();
// apenas arrastar e soltar pelo botão esquerdo do mouse, ou seja, o botão esquerdo do mouse é 1 Firefox é 0
if (Common.isie && ev.button == 1 ||! Common.isie && ev.button == 0) {
}
outro {
retornar falso;
}
// Trate casos especiais: quando o movimento superior/inferior não é encontrado, ele retorna à coluna superior/inferior do arrasto inicial.
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;
quebrar;
}
}
}
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, primeiroChildup: tmpPosfirstchild.y, lastChilddown: tmpPoslastChild.y + Common.lastChild (dragtbl.Rows [0] .Cells [tmpcolid], "div").
// salve o local atual onde cada recipiente pode ser arrastado e solto
dragobj.draGarray = dragobj.regdragspos ();
// Insira a caixa pontilhada
var DashEdElement = document.createElement ("div");
dreathedElement.style.csStext = dragdiv.style.csStext;
DashEdElement.style.border = "Danked 2px #AAA";
DashEdElement.style.marginbottom = "6px";
dreathedElement.style.width = dragdiv.offsetWidth - 2 * parseint (DashEdElement.style.borderwidth) + "px"; // subtraia a largura do boder para manter o tamanho da caixa pontilhada consistente com o dragdiv
dreathedElement.style.Height = dragdiv.offsetHeight - 2 * parseint (DashEdElement.style.borderwidth) + "px"; // Adicione PX para garantir que a FF esteja correta
dreadElement.style.position = "relativo";
if (dragdiv.nextsibling) {
dragdiv.parentnode.insertBefore (DashEdElement, dragdiv.nextsibling);
}
outro {
dragdiv.parentnode.appendChild (DashEdElement);
}
// Torna -se absoluto ao arrastar
dragdiv.style.width = dragdiv.offsetWidth + "px";
dragdiv.style.position = "absoluto";
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 ();
} outro {
window.captureEvents (event.mouseMove);
}
dragobj.setOpacity (dragdiv, dragobj.opacity);
// Firefox remove o problema de arrastar e soltar fotos no recipiente
if (ev.preventdefault) {
ev.preventDefault ();
Ev.stopPropagation ();
}
document.onMousEmove = function (e) {
if (dragobj.movable) {
var ev = e || Window.Event || Common.Getevent ();
// ou seja, remove o problema de arrastar e soltar fotos no recipiente
if (document.all) // ie
{
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;
for (var k = 0; k <dragobj.dragarray.length; k ++) {
if (dragdiv == dragobj.draGarray [i]) {
continuar;
}
if (movepos.x> dragobj.draGarray [k] .posleft && movepos.x <dragobj.dragarray [k] .posleft + dragobj.draGarray [k] .poswidthth
&& 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) {
// sobe para cima
DashEdElement.style.width = TargetDiv.OffSetWidth - 2 * parseint (DashEDElement.style.borderwidth) + "px";
TargetDiv.parentnode.insertBefore (DashEdElement, TargetDiv);
}
outro {
// mova para baixo
DashEdElement.style.width = TargetDiv.OffSetWidth - 2 * parseint (DashEDElement.style.borderwidth) + "px";
if (TargetDiv.Nextsibling) {
TargetDiv.ParentNode.insertFore (DashEdElement, TargetDiv.Nextsibling);
}
outro {
TargetDiv.Parentnode.appendChild (DashEdElement);
}
}
}
}
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) {
/// A coluna não tem div
if (dragtbl.rows [0] .Cells [j] .getElementsByTagName ("div"). Comprimento == 0) {
dreathedElement.style.width = dragtbl.Rows [0] .Cells [j] .offsetWidth - 2 * parseint (trapacelement.style.borderwidth) + "px";
dragtbl.Rows [0] .Cells [j] .AppendChild (DashEdElement);
}
outro {
var posfirstChild = Common.getElementPos (Common.firstChild (dragtbl.rows [0] .Cells [j], "div"));
var poslastChild = Common.getElementPos (Common.lastChild (dragtbl.rows [0] .Cells [j], "div"));
// Trate casos especiais: quando o movimento superior/inferior não é encontrado, ele retorna à coluna superior/inferior do arrasto inicial.
var tmpup, tmpdown;
if (tmpobj.colid == j) {
tmpup = tmpobj.firstchildup;
tmpdown = tmpobj.lastChildDown;
}
outro {
tmpup = posfirstchild.y;
tmpdown = poslastChild.y + Common.lastChild (dragtbl.rows [0] .Cells [j], "div"). Offsetheight;
}
if (movepos.y <tmpup) {/// insira a caixa pontilhada do topo
DashEdElement.style.width = Common.firstChild (dragtbl.Rows [0] .Cells [j], "div"). OffsetWidth - 2 * parseint (tracelement.style.borderwidth) + "px";
dragtbl.Rows [0] .Cells [j] .InsertBefore (DashEdElement, Common.FirstChild (dragtbl.rows [0] .Cells [j], "div"));
}
caso contrário, if (movepos.y> tmpdown) {/// insira a caixa pontilhada de baixo
dreathedElement.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 ();
}
outro {
Window.ReleaseEvents (dragdiv.mouseMove);
}
dragobj.setOpacity (dragdiv, 100);
dragobj.movable = false;
dragobj.tmpx = 0;
dragobj.tmpy = 0;
// Certifique -se de escrevê -lo neste se
dragdiv.style.left = "";
dragdiv.style.top = "";
dragdiv.style.width = "";
dragdiv.style.position = "";
dreathedElement.parentnode.insertBefore (dragdiv, tracelement);
dreathedElement.parentnode.removeChild (DashEdElement);
}
};
}
},
Setopacity: function (dragdiv, n) {
if (Common.isie) {
dragdiv.filters.alpha.Opacity = n;
}
outro {
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);
}
retornar maxzindex;
},
Regdragspos: function () {
var ArrDragdivs = new Array ();
var dragtbl = document.getElementById ("dragtable");
var tmpdiv, tmppos;
for (i = 0; i <dragtbl.getElementsByTagName ("div"). comprimento; 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, chood: tmpdiv.offsetheight});
}
}
return ardragdivs;
}
}
window.onload = function () {
var dragtbl = document.getElementById ("dragtable");
if (Common.getCookie ("configarr")) {
var configarr = avaliar ("(" + 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]));
}
}
}
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 = "";
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 + "]";
}
// formato como: [['dragdiv3', 'dragdiv5'], ['dragdiv4', 'dragdiv1'], ['dragdiv2']]
Common.setcookie ("configarr", "[" + configarr + "]");
}
</script>
<style type = "text/css">
.spandiv {
Posição: relativa;
Largura: 5px;
Altura: 5px;
}
.dragdiv, .nodragdiv {
Posição: relativa;
filtro: alfa (opacidade = 100);
opacidade: 1;
Margin-Bottom: 6px;
Background-Color: #fffff;
}
</style>
</head>
<Body>
<script type = "text/javascript">
</script>
<tabela id = "dragtable" cellpadding = "3" style = "borda: sólido 0px verde; largura: 98%;">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<tabela CellPadding = "0" CellPacing = "0">
<tr id id = "titleBar1" style = "altura: 22px; text-align: esquerda; cor de fundo:#547bc9; cor: branco; preenchimento: 3px; cursor: move;">
<th align = "esquerda" unslectable = "on"> title1 </th>
</tr>
<tr Style = "Altura: 130px; preenchimento: 3px;" align = "esquerda" valign = "top">
<TD Unslectable = "On"> Os personagens aqui são relativamente longos ... Estou aqui ... China ... China ... estrangeira., Veja se há algum transbordamento! </td>
</tr>
</tabela>
</div>
<div id = "dragdiv2">
<tabela CellPadding = "0" CellPacing = "0">
<tr id de "titleBar2" style = "altura: 22px; text-align: esquerda; cor de fundo:#547bc9; cor: branco; preenchimento: 3px; cursor: move;">
<th align = "Left" Unslectable = "On" Title2 </th>
</tr>
<tr Style = "Altura: 130px; preenchimento: 3px;" align = "esquerda" valign = "top">
<TD Unslectable = "On"> Content2 ... </td>
</tr>
</tabela>
</div>
</td>
<td valign = "top">
<div id = "dragdiv3">
<tabela CellPadding = "0" CellPacing = "0">
<tr id id = "titlebar3" style = "altura: 22px; text-align: esquerda; cor de fundo:#547bc9; cor: branco; preenchimento: 3px; cursor: move;">
<th align = "Left" Unslectable = "On"> Title3 </th>
</tr>
<tr Style = "Altura: 230px; preenchimento: 3px;" align = "esquerda" valign = "top">
<td não selecionado = "on"> content3 ... </td>
</tr>
</tabela>
</div>
</td>
<td valign = "top">
<div id = "dragdiv4">
<tabela CellPadding = "0" CellPacing = "0">
<tr id ID = "titleBar4" style = "Hight: 22px; Text-align: esquerda; cor de fundo:#547bc9; cor: branco; preenchimento: 3px; cursor: move;">
<th align = "Left" Unslectable = "On" Title4 </th>
</tr>
<tr Style = "Altura: 130px; preenchimento: 3px;" align = "esquerda" valign = "top">
<td não selecionado = "on"> content4 ... </td>
</tr>
</tabela>
</div>
<div id = "dragdiv5">
<tabela CellPadding = "0" CellPacing = "0">
<tr id ID = "titleBar5" style = "altura: 22px; text-align: esquerda; cor de fundo:#547bc9; cor: branco; preenchimento: 3px; cursor: move;">
<th align = "Left" Unslectable = "On"> Title5 </th>
</tr>
<tr Style = "Altura: 130px; preenchimento: 3px;" align = "esquerda" valign = "top">
<TD Unslectable = "On"> Content5 ... </td>
</tr>
</tabela>
</div>
</td>
</tr>
</tabela>
</body>
</html>
<br> <br> <HR> coletado na Internet, apenas para troca de interesses e aprendizado, e não para fins comerciais. </font> </p>
Espero que este artigo seja útil para a programação JavaScript de todos.