Este artigo descreve o método de implementar o efeito de arrasto da camada de arrasto do módulo igoogledivdrag por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS implementa o efeito da camada de arrasto do módulo de arrasto do igoogle Div </title>
<style type = "text/css">
*{margem: 0px; preenchimento: 0px;}
corpo {posição: relativo; Largura: 780px; Altura: 800px; Fronteira: 1px vermelho sólido}
.drag {width: 200px; Altura: 100px; borda: 1px Solid #000; margem: 20px; Antecedentes: #ffff}
.drag h1 {margem: 0px; preenchimento: 0px; tamanho de fonte: 12px; Altura: 18px; altura de linha: 18px; Antecedentes:#e0e7f3; Indente de texto: 20px; Cursor: Move;}
.center {margem: 200px; Fronteira: 3px vermelho sólido}
</style>
<script type = "text/javascript"> </sCript>
</head>
<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> teste 2 </h1> </div>
<div> <h1> teste 3 </h1> </div>
<div> <h1> teste 4 </h1> </div>
<div> <h1> teste 5 </h1> </div>
</body>
</html>
<script type = "text/javascript">
/*
Autor: Popper.W
Versão: v2.0
*/
var dragzindexNumber = 0;
função arrastar (obj) {
var ox, oy, ex, xy, tag = 0, máscara = 0;
if (tag == 0) {
obj.onmousedown = função (e)
{
if (máscara == 1) {return; }
obj.style.zindex = dragzindexNumber ++;
transp (obj, "start")
tag = 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");
com (tempdiv.style)
{
largura = obj.offsetWidth+"px";
altura = obj.offsetheight+"px";
borda = "1px vermelho pontilhado";
posicionamento = "absoluto";
esquerda = obj.offsetleft+"px";
top = obj.offsettop+"px";
zindex = 999;
}
document.body.appendChild (tempdiv);
this.ele = tempdiv;
fdragstart (tempdiv);
document.body.onmouseMove = function (e) {
if (tag == 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 = função (e)
{
var e = e || window.event;
fdragend (tempdiv);
obj.style.Position = "Absolute";
filme (obj, parseint (e.clientX) -ex-19, parseint (e.clienty) -ey-20);
tempdiv.parentnode.removechild (tempdiv);
tag = 0;
}
}
}
}
Função de filme (O, L, T) {
var a = 1;
máscara = 1;
var ol = parseint (O.OffSetLeft);
var ot = parseInt (O.OffSettop);
var itimer = setInterval (function () {
se (a == 10)
{
transp (o, "end");
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);
}
função fcanclebubble (e)
{
var e = window.event || e;
if (e.PreventDefault) e.PreventDefault ();
else e.returnValue = false;
}
função transp (o, modo) {
if (mode == "start") {
if (document.all) {
o.style.filter = "alfa (opacidade = 50)";
}outro{
o.style.Opacity = 0,5;
}
}
outro {
if (document.all) {
o.style.filter = "alfa (opacidade = 100)";
}outro{
o.style.Opacity = 1;
}
}
}
função getOffset (EVT)
{
var no destino = evt.target;
if (Target.OffSetLeft == indefinido)
{
Target = Target.parentNode;
}
var pageCoord = getPageCoord (Target);
var eventcoord =
{
x: window.pagexoffset + evt.clientx,
y: window.pageyoffset + evt.clienty
};
var offset =
{
Offsetx: Eventcoord.x - PageCoord.x,
Offsety: eventcoord.y - PageCoord.y
};
retornar deslocamento;
}
função getPageCoord (elemento)
{
var coord = {x: 0, y: 0};
Enquanto (elemento)
{
coord.x += element.offsetLeft;
coordenate.y += element.offsetTop;
Element = element.OffSetParent;
}
coord de retorno;
}
função getEventoffset (EVT)
{
var msg = "";
if (evt.offsetx == indefinido)
{
var evtoffSets = getOffset (EVT);
msg = {offsetx: evtoffsets.offsetx, offsety: evtoffsets.offsety};
}
outro
{
msg = {offsetx: evt.offsetx, offsety: evt.offsety};
}
retornar msg;
}
função fdragstart (xele)
{
Switch (fckbrs ())
{
Caso 3:
window.getSelection (). removeallLanges ();
quebrar;
padrão:
Xele.setCapture ();
quebrar;
}
}
função fdragend (xele)
{
Switch (fckbrs ())
{
Caso 3:
window.getSelection (). removeallLanges ();
quebrar;
padrão:
Xele.releaseCapture ();
quebrar;
}
}
função fckbrs ()
{
Switch (Navigator.AppName)
{
caso 'ópera': retornar 2;
caso 'Netscape': retornar 3;
Padrão: retornar 1;
}
}
var elemento = document.getElementsByTagName ("div");
for (var i = 0; i <element.length; i ++) {
if (elemento [i] .className == "drag") {
arraste (elemento [i])}
}
</script>
Espero que este artigo seja útil para a programação JavaScript de todos.