Este artículo describe el método para implementar el efecto de arrastre de la capa de arrastre del módulo IgoogledIVDrag por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js implementa el efecto de la capa de arrastre del módulo de arrastre de igoogle div </title>
<style type = "text/css">
*{margen: 0px; relleno: 0px;}
cuerpo {posición: relativo; Ancho: 780px; Altura: 800px; borde: 1px sólido rojo}
.drag {ancho: 200px; Altura: 100px; borde: 1px sólido #000; margen: 20px; Antecedentes: #ffff}
.drag H1 {margen: 0px; relleno: 0px; tamaño de fuente: 12px; Altura: 18px; Línea de altura: 18px; Antecedentes:#E0E7F3; INDENT DE TEXTO: 20PX; cursor: mover;}
.center {margen: 200px; borde: 3px sólido rojo}
</style>
<script type = "text/javaScript"> </script>
</ablo>
<Body>
<div>
<h1> <strong> www.baidu.com </strong> </h1>
</div>
<div>
<h1> www.163.com </h1>
</div>
<div>
<h1> <strong> www.vevb.com </strong> </h1>
</div>
<div> <h1> prueba 2 </h1> </div>
<div> <h1> prueba 3 </h1> </div>
<div> <h1> prueba 4 </h1> </div>
<div> <h1> prueba 5 </h1> </div>
</body>
</html>
<script type = "text/javaScript">
/*
Autor: Popper.W
Versión: v2.0
*/
var dragzIndexNumber = 0;
función drag (obj) {
var ox, oy, ex, xy, tag = 0, máscara = 0;
if (tag == 0) {
obj.onmousedown = function (e)
{
if (máscara == 1) {return; }
obj.style.zindex = dragzIndexNumber ++;
transp (obj, "inicio")
etiqueta = 1;
var e = e || window.event;
ex = getEventOffset (e) .OffSetX;
ey = getEventOffset (e) .OffSety;
ox = parseint (obj.offsetleft);
oy = parseint (obj.offsettop);
tempDiv = document.createElement ("div");
con (tempdiv.style)
{
ancho = obj.offsetWidth+"Px";
altura = obj.offsetheight+"px";
border = "1px punteado rojo";
posición = "absoluto";
izquierda = obj.offsetleft+"px";
top = obj.offsettop+"px";
zindex = 999;
}
document.body.appendChild (tempDiv);
this.ele = tempDiv;
fdragStart (tempDiv);
document.body.onmouseMove = function (e) {
if (etiqueta == 1)
{
var e = e || window.event;
tempdiv.style.left = parseInt (e.clientx) -Ex+"px";
tempdiv.style.top = parseint (e.clienty) -ey+"px";
}
else {if (! tempDiv == null) tempdiv.parentnode.removechild (tempDiv)}
}
tempdiv.onmouseup = function (e)
{
var e = e || window.event;
fdragend (tempDiv);
obj.style.position = "Absolute";
Película (OBJ, ParseInt (E.Clientx) -Ex-19, Parseint (E.Clienty) -ey-20);
tempdiv.parentnode.removechild (tempDiv);
etiqueta = 0;
}
}
}
}
Function Movie (O, L, T) {
var a = 1;
máscara = 1;
var ol = parseInt (O.OffsetLeft);
var ot = parseInt (O.OffSettop);
var itimer = setInterval (function () {
if (a == 10)
{
transp (o, "final");
máscara = 0;
ClearInterval (itimer);
}
o.style.left = ol+a*(l-ol)/10+"px";
o.style.top = ot+a*(t-ot)/10+"px";
a ++;
}, 20);
}
función fcancleBubble (e)
{
var e = window.event || mi;
if (E.PreventDefault) E.PreventDefault ();
else E.ReturnValue = false;
}
función transp (o, modo) {
if (mode == "inicio") {
if (document.all) {
o.style.filter = "alfa (opacidad = 50)";
}demás{
o.style.opacity = 0.5;
}
}
demás {
if (document.all) {
o.style.filter = "alfa (opacidad = 100)";
}demás{
o.style.opacity = 1;
}
}
}
function getoffset (EVT)
{
var Target = evt.target;
if (target.offsetleft == Undefined)
{
Target = Target.ParentNode;
}
var pageCoord = getPageCoord (objetivo);
var EventCoord =
{
x: ventana.pagexoffset + evt.clientx,
Y: Window.PageyOffset + EVT.Clienty
};
VAR offset =
{
offsetx: eventCoord.x - pagecoord.x,
Offsety: EventCoord.y - Pagecoord.y
};
desplazamiento de retorno;
}
función getPageCoord (elemento)
{
var coord = {x: 0, y: 0};
Mientras (elemento)
{
coord.x += element.offsetleft;
coordenate.y += element.offsettop;
elemento = elemento.OffSetParent;
}
Coord de regreso;
}
función getEventOffset (EVT)
{
var msg = "";
if (evt.offsetx == Undefined)
{
var evtoffsets = GetOffSet (EVT);
msg = {offsetx: evtoffsets.offsetx, offsety: evtoffsets.offsety};
}
demás
{
msg = {offsetx: evt.offsetx, offsety: evt.offsety};
}
regresar msg;
}
función fdragStart (Xele)
{
Switch (fckbrs ())
{
Caso 3:
Window.getSelection (). removealLranges ();
romper;
por defecto:
Xele.setCapture ();
romper;
}
}
función fdragend (Xele)
{
Switch (fckbrs ())
{
Caso 3:
Window.getSelection (). removealLranges ();
romper;
por defecto:
Xele.RelEASECAPTure ();
romper;
}
}
función fckbrs ()
{
Switch (Navigator.appname)
{
caso 'ópera': retorno 2;
Caso 'Netscape': retorno 3;
Valor predeterminado: devolver 1;
}
}
var elemento = document.getElementsBytagName ("div");
para (var i = 0; i <element.length; i ++) {
if (elemento [i] .classname == "arrastre") {
arrastrar (elemento [i])}
}
</script>
Espero que este artículo sea útil para la programación de JavaScript de todos.