Este artículo describe el método de arrastrar y soltar efectos especiales de JS que imita el módulo de página de inicio personalizado de Igoogle. Compártelo para su referencia. El método de implementación específico es el siguiente:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js imitar iGoogle personalizado de la página de inicio del módulo de arrastre y efecto de caída </title>
<script type = "text/javaScript">
var común = {
getEvent: function () {// ie/ff
if (document.all) {
Ventana de retorno.event;
}
func = getEvent.caller;
while (func! = null) {
var arg0 = func.arguments [0];
if (arg0) {
if ((arg0.constructor == evento || arg0.constructor == mouseevent) || (typeof (arg0) == "objeto" && arg0.preventDefault && arg0.stoppropagation)) {
regresar arg0;
}
}
func = func.caller;
}
regresar nulo;
},
getMousePos: function (ev) {
if (! ev) {
ev = this.getEvent ();
}
if (ev.pagex || ev.pagey) {
devolver {
X: EV.Pagex,
Y: EV.Pagey
};
}
if (document.documentelement && document.documentelement.scrolltop) {
devolver {
x: ev.clientx + document.documentelement.scrollleft - document.documentelement.clientleft,
Y: ev.clienty + document.documentelement.scrolltop - document.documentelement.clienttop
};
}
else if (document.body) {
devolver {
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;
hacer {
_x += El.OffSetLeft;
_y += el.offsettop;
} while (el = el.OffSetParent);
return {x: _x, y: _y};
},
getitSelf: function (id) {
return "String" == 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: (Windows.innerHeight)? Window.innerHeight: (document.documentelement && document.documentelement.clientHeight)? document.documentelement.clientHeight: (document.body? Document.Body.Offsetheight: 0)},
ISIE: Document.lly? Verdadero: Falso,
setouterhtml: function (obj, html) {
var objrange = document.createrGe ();
obj.innerhtml = html;
Objrange.selectnodeContents (obj);
var frag = objrange.extractContents ();
obj.parentnode.insertbefore (frag, obj);
obj.parentnode.removechild (obj);
},
FirstChild: function (Parentobj, tagName) {
if (común.isie) {
regresar parentobj.firstchild;
}
demás {
var arrr = parentobj.getElementsBytagName (tagName);
devolver arr [0];
}
},
lastchild: function (parentobj, tagName) {
if (común.isie) {
regresar parentobj.lastchild;
}
demás {
var arrr = parentobj.getElementsBytagName (tagName);
return arr [arr.length - 1];
}
},
setcookie: function (nombre, valor) {
document.cookie = name + "=" + valor;
},
GetCookie: function (nombre) {
var strcookie = document.cookie;
var Arrcookie = strcookie.split (";");
para (var i = 0; i <arrcookie.length; i ++) {
var arr = arrcookie [i] .split ("=");
if (! arr [1]) {
devolver "";
}
if (arr [0] == nombre) {
regresar arr [1];
}
}
devolver "";
},
Delcookie: function (nombre) {
var exp = new Date ();
exp.setTime (exp.gettime () - 1);
var cval = this.getcookie (nombre);
if (cval! = null) document.cookie = name + "=" + cval + "; expires =" + exp.togmtString ();
}
}
var class = {
create: function () {
function de return () {this.init.apply (this, argumentos); }
}
}
var drag = class.create ();
Drag.prototype = {
init: function (titleBar, DragDiv, Options) {
// Establecer si los clics son transparentes, el valor predeterminado es 60% transparente
TitleBar = Common.getitSelf (TitleBar);
dragDiv = Common.getitSelf (dragDiv);
this.dragarea = {maxleft: -9999, maxright: 9999, maxtop: -9999, maxbottom: 9999};
if (opciones) {
this.opacity = options.opacity? (iSnan (parseInt (options.opacity))? 100: parseInt (opciones.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};
}
}
demás {
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 || Común.getEvent ();
// Solo arrastre y suelte a través del botón del mouse izquierdo, es decir, el botón del mouse izquierdo es 1 Firefox es 0
if (común.isie && ev.button == 1 ||! Common.isie && ev.button == 0) {
}
demás {
devolver falso;
}
// Trate los casos especiales: cuando no se encuentra el movimiento superior/inferior, vuelve a la columna superior/inferior del arrastre inicial.
var tmpcolid;
para (c = 0; c <dragtbl.rows [0] .Cells.length; c ++) {
para (k = 0; k <dragtbl.rows [0] .cells [c] .getElementsBytagName ("div"). longitud; k ++) {
if (dragDiv.id == dragtbl.rows [0] .Cells [c] .getElementsBytagName ("div") [k] .id) {
tmpcolid = c;
romper;
}
}
}
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 + comunes.lastchild (dragtbl.rows [0] .Cells [tmpcolid], "div").
// Guardar la ubicación actual donde cada contenedor se puede arrastrar y soltar
dragoBj.dragarArray = dragobj.regdragSpoS ();
// inserta la caja punteada
var pableedElement = document.createElement ("div");
phededelement.style.csstext = dragdiv.style.csstext;
DableedElement.style.border = "Dable 2px #AAA";
phededelement.style.MarginBottom = "6px";
phededelement.style.width = dragDiv.OffSetWidth - 2 * parseInt (DableedElement.Style.BorderWidth) + "Px"; // Resta el ancho de bodeR para mantener el tamaño de la caja punteada consistente con DragDiv
phededelement.style.height = dragDiv.offsetheight - 2 * parseint (DableedElement.Style.BorderWidth) + "Px"; // Agregar PX para asegurarse de que FF sea correcto
DankedElement.style.Position = "relativo";
if (dragDiv.NextSibling) {
dragDiv.ParentNode.insertbefore (DableedElement, dragDiv.NextSibling);
}
demás {
dragDiv.ParentNode.AppendChild (DableedElement);
}
// se vuelve absoluto cuando se arrastra
dragDiv.style.width = dragDiv.OffSetWidth + "Px";
dragDiv.Style.Position = "Absolute";
dragoBJ.MoVable = true;
dragDiv.style.zindex = dragobj.getzindex () + 1;
var downpos = común.getMousePos (eV);
dragobj.tmpx = downpos.x - dragDiv.OffSetleft;
dragobj.tmpy = downpos.y - dragdiv.offsettop;
if (común.isie) {
dragDiv.SetCapture ();
} demás {
Window.CaptureEvents (Event.MouseMove);
}
dragoBJ.SetOpacity (dragDiv, dragobj.opacity);
// Firefox elimina el problema de arrastrar y soltar imágenes en el contenedor
if (ev.preventDefault) {
ev.preventDefault ();
ev.stoppropagation ();
}
document.onmouseMove = function (e) {
if (dragoBJ.MoVable) {
var ev = e || Window.event || Común.getEvent ();
// es decir, elimina el problema de arrastrar y soltar imágenes en el contenedor
if (document.all) // es decir
{
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;
para (var k = 0; k <dragobj.dragararray.length; k ++) {
if (dragDiv == dragobj.dragArray [i]) {
continuar;
}
if (MovePos.x> dragobj.dragararray [k] .losleft && mudpos.x <dragobj.dragArray [k] .losleft + dragobj.dragArray [k] .loswidth
&& MovePos.y> dragobj.dragArray [k] .postop && mudosa.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) {
//Subir
phededelement.style.width = TargetDiv.OffSetWidth - 2 * parseInt (DableedElement.Style.BorderWidth) + "Px";
TargetDiv.ParentNode.InsertBefore (DableedElement, TargetDiv);
}
demás {
// moverse hacia abajo
phededelement.style.width = TargetDiv.OffSetWidth - 2 * parseInt (DableedElement.Style.BorderWidth) + "Px";
if (TargetDiv.NextSibling) {
TargetDiv.ParentNode.insertbefore (DableedElement, TargetDiv.NextSibling);
}
demás {
TargetDiv.ParentNode.AppendChild (DableedElement);
}
}
}
}
para (j = 0; j <dragtbl.rows [0] .cells.length; j ++) {
var startleft = común.getElementPos (dragtbl.rows [0] .Cells [j]). x;
if (MovePos.x> sprethleft && mudpoPos.x <startleft + dragtbl.rows [0] .cells [j] .OffsetWidth) {
/// La columna no tiene Div
if (dragtbl.rows [0] .Cells [j] .getElementsBytagName ("div"). longitud == 0) {
phededelement.style.width = dragtbl.rows [0] .Cells [j] .OffSetWidth - 2 * parseInt (DableedElement.Style.BorderWidth) + "Px";
dragtbl.rows [0] .Cells [j] .AppendChild (DableedElement);
}
demás {
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 los casos especiales: cuando no se encuentra el movimiento superior/inferior, vuelve a la columna superior/inferior del arrastre inicial.
var tmpup, tmpdown;
if (tmpobj.colid == j) {
tmpup = tmpobj.firstchildup;
tmpdown = tmpobj.lastchilddown;
}
demás {
tmpup = posfirstchild.y;
tmpdown = poslastchild.y + común.lastchild (dragtbl.rows [0] .Cells [j], "div"). Offsetheight;
}
if (mudosa.y <tmpup) {/// inserta la caja punteada desde la parte superior
DankedElement.style.width = Common.firstchild (dragtbl.rows [0] .Cells [j], "div"). offsetWidth - 2 * parseint (DableedElement.style.BorderWidth) + "Px";
dragtbl.rows [0] .Cells [j] .insertbefore (DableedElement, Common.firstChild (dragTBl.Rows [0] .Cells [j], "div"));
}
else if (mudosa.y> tmpdown) {/// inserta el cuadro punteado desde la parte inferior
DableedElement.style.width = Common.lastChild (dragtbl.rows [0] .Cells [j], "div"). offsetWidth - 2 * parseint (DableedElement.style.BorderWidth) + "Px";
dragtbl.rows [0] .Cells [j] .AppendChild (DableedElement);
}
}
}
}
}
};
document.onmouseUp = function () {
if (dragoBJ.MoVable) {
if (común.isie) {
dragDiv.RelEASECapTure ();
}
demás {
Window.Releaseevents (dragDiv.MouseMove);
}
dragoBJ.SetOpacity (dragDiv, 100);
dragoBJ.MoVable = false;
dragoBj.tmpx = 0;
dragoBj.tmpy = 0;
// asegúrese de escribirlo en esto si
dragdiv.style.left = "";
dragDiv.style.top = "";
dragDiv.style.width = "";
dragDiv.Style.Position = "";
phededelement.parentnode.insertbefore (dragDiv, phededelement);
phededelement.parentnode.removechild (DableedElement);
}
};
}
},
SetOpacity: function (dragDiv, n) {
if (común.isie) {
dragdiv.filters.alpha.opacity = n;
}
demás {
dragDiv.style.opacity = n / 100;
}
},
GetZindex: function () {
var maxzindex = 0;
var divs = document.getElementsBytagName ("div");
para (z = 0; z <divs.length; z ++) {
maxzindex = math.max (maxzindex, divs [z] .style.zindex);
}
devolver maxzindex;
},
RegDragSpos: function () {
var arrdragDivs = new Array ();
var dragtBl = document.getElementById ("DragTable");
var tmpdiv, tmpPos;
para (i = 0; i <dragtbl.getElementsBytagName ("div"). longitud; i ++) {
tmpdiv = dragTBl.getElementsBytagName ("div") [i];
if (tmpdiv.classname == "dragDiv") {
TMPPOS = Common.getElementPos (TMPDIV);
ardragDivs.push ({dragid: tmpdiv.id, posleft: tmppos.x, postop: tmppos.y, poswidth: tmpdiv.offsetwidth, posheight: tmpdiv.offsetheight});
}
}
regresar arrdragDivs;
}
}
window.onload = function () {
var dragtBl = document.getElementById ("DragTable");
if (común.getcookie ("configurarr")) {
var configarr = eval ("(" + common.getcookie ("configurarr") + ")");
para (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
para (j = 0; j <configurarr [i] .length; j ++) {
dragtbl.rows [0] .Cells [i] .AppendChild (document.getElementById (configurarr [i] [j]));
}
}
}
nuevo Drag ("TitleBar1", "DragDiv1");
nuevo Drag ("TitleBar2", "DragDiv2");
nuevo Drag ("TitleBar3", "DragDiv3");
nuevo Drag ("TitleBar4", "DragDiv4");
nuevo Drag ("TitleBar5", "DragDiv5");
}
window.onunload = function () {
var dragtBl = document.getElementById ("DragTable");
var configurarr = "";
para (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
var tmpStr = "";
para (j = 0; j <dragtbl.rows [0] .Cells [i] .getElementsBytagName ("div"). longitud; j ++) {
tmpStr + = (tmpStr == ""? "": ",") + "'" + dragtbl.rows [0] .Cells [i] .getElementsByTagName ("div") [j] .id + "'";
}
configurarr + = (configurarr == ""? "": ",") + "[" + tmpstr + "]";
}
// Formato como: [['dragDiv3', 'dragDiv5'], ['dragDiv4', 'dragDiv1'], ['dragDiv2']]
Common.setCookie ("configurarr", "[" + configurarr + "]");
}
</script>
<style type = "text/css">
.spandiv {
Posición: relativo;
Ancho: 5px;
Altura: 5px;
}
.dragdiv, .nodragdiv {
Posición: relativo;
Filtro: alfa (opacidad = 100);
Opacidad: 1;
Botón de margen: 6px;
Color de fondo: #fffff;
}
</style>
</ablo>
<Body>
<script type = "text/javaScript">
</script>
<table id = "dragTable" cellPadding = "3" style = "borde: sólido 0px verde; ancho: 98%;">
<tr>
<td valign = "top">
<div id = "dragDiv1">
<TABLE CELLPADDING = "0" CellPacing = "0">
<tr id = "titleBar1" style = "altura: 22px; text-align: left; fondo de fondo:#547bc9; color: blanco; relleno: 3px; cursor: mover;">
<th align = "izquierda" no selectable = "on"> title1 </th>
</tr>
<tr style = "altura: 130px; relleno: 3px;" align = "izquierda" valign = "top">
<td no selectable = "on"> Los personajes aquí son relativamente largos ... estoy aquí ... China ... China ... extranjera., Vea si hay algún desbordamiento! </td>
</tr>
</table>
</div>
<div id = "dragDiv2">
<TABLE CELLPADDING = "0" CellPacing = "0">
<tr id = "titleBar2" style = "altura: 22px; text-align: izquierda;#547bc9; color: blanco; relleno: 3px; cursor: mover;">
<th align = "izquierda" no selectable = "on"> title2 </th>
</tr>
<tr style = "altura: 130px; relleno: 3px;" align = "izquierda" 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 = "altura: 22px; text-align: left; fondo de fondo:#547bc9; color: blanco; relleno: 3px; cursor: mover;">
<th align = "left" no selectable = "on"> title3 </th>
</tr>
<tryle = "altura: 230px; relleno: 3px;" align = "izquierda" 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 = "altura: 22px; text-align: left; background-color:#547bc9; color: blanco; relleno: 3px; cursor: mover;">
<th align = "Left" no selectable = "on"> title4 </th>
</tr>
<tr style = "altura: 130px; relleno: 3px;" align = "izquierda" valign = "top">
<td unselectable = "on"> content4 ... </td>
</tr>
</table>
</div>
<div id = "dragDiv5">
<TABLE CELLPADDING = "0" CellPacing = "0">
<tr id = "titleBar5" style = "altura: 22px; text-align: left; fondo de fondo:#547bc9; color: blanco; relleno: 3px; cursor: mover;">
<th align = "izquierda" no selectable = "on"> title5 </th>
</tr>
<tr style = "altura: 130px; relleno: 3px;" align = "izquierda" valign = "top">
<td unselectable = "on"> content5 ... </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
<br> <br> <hr> recolectado en Internet, solo para el intercambio de intereses y aprendizaje, y no con fines comerciales. </font> </p>
Espero que este artículo sea útil para la programación de JavaScript de todos.