Artikel ini menjelaskan metode mengimplementasikan efek drag drag drag dari modul igoogledivdrag oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<Title> JS mengimplementasikan efek drag layer dari igoogle div drag module </iteme>
<type style = "text/css">
*{margin: 0px; padding: 0px;}
tubuh {position: relatif; Lebar: 780px; Tinggi: 800px; Perbatasan: 1px solid red}
.drag {lebar: 200px; Tinggi: 100px; Perbatasan: 1px Solid #000; margin: 20px; Latar Belakang: #FFFF}
.drag h1 {margin: 0px; padding: 0px; font-size: 12px; Tinggi: 18px; Line-Height: 18px; Latar belakang:#e0e7f3; Text-Indent: 20px; kursor: pindahkan;}
.center {margin: 200px; Perbatasan: 3px solid red}
</tyle>
<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>
<hv> <h1> tes 2 </h1> </div>
<hv> <h1> tes 3 </h1> </div>
<hv> <h1> tes 4 </h1> </div>
<hv> <h1> tes 5 </h1> </div>
</body>
</html>
<type skrip = "Teks/JavaScript">
/*
Penulis: Popper.W
Versi: V2.0
*/
var dragzindexNumber = 0;
function drag (obj) {
var ox, oy, ex, xy, tag = 0, mask = 0;
if (tag == 0) {
obj.onmousedown = fungsi (e)
{
if (mask == 1) {return; }
obj.style.zindex = dragzIndexNumber ++;
Transp (Obj, "Mulai")
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");
dengan (tempdiv.style)
{
lebar = obj.offsetWidth+"px";
tinggi = obj.offsetheight+"px";
border = "1px bertitik merah";
Posisi = "Absolute";
kiri = 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 = fungsi (e)
{
var e = e || window.event;
fdragend (tempdiv);
obj.style.position = "absolute";
Film (OBJ, Parseint (E.ClientX) -Ex-19, ParseInt (E.Clienty) -ey-20);
tempdiv.parentnode.removechild (tempdiv);
Tag = 0;
}
}
}
}
film fungsi (o, l, t) {
var a = 1;
topeng = 1;
var ol = parseInt (O.Offsetleft);
var ot = parseInt (O.Offsettop);
var itimer = setInterval (function () {
if (a == 10)
{
transp (o, "end");
Topeng = 0;
ClearInterval (itimer);
}
o.style.left = ol+a*(l-ol)/10+"px";
o.style.top = ot+a*(t-OT)/10+"px";
a ++;
}, 20);
}
fungsi fcanclebubble (e)
{
var e = window.event || e;
if (e.preventdefault) e.preventdefault ();
lain e.returnValue = false;
}
fungsi transp (o, mode) {
if (mode == "start") {
if (document.all) {
o.style.filter = "alpha (opacity = 50)";
}kalau tidak{
o. style.opacity = 0,5;
}
}
kalau tidak {
if (document.all) {
o.style.filter = "alpha (opacity = 100)";
}kalau tidak{
o.style.opacity = 1;
}
}
}
function getoffset (EVT)
{
var target = evt.target;
if (target.offsetleft == tidak ditentukan)
{
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
};
Return Offset;
}
fungsi getPageCoord (elemen)
{
var coord = {x: 0, y: 0};
While (elemen)
{
coord.x += element.offsetleft;
koordinat.y += elemen.offsettop;
elemen = elemen.offsetParent;
}
koorde kembali;
}
function getEventOffset (EVT)
{
var msg = "";
if (evt.offsetx == tidak ditentukan)
{
var evtoffsets = getOffset (EVT);
msg = {offsetx: evtoffsets.offsetx, offsety: evtoffsets.offsety};
}
kalau tidak
{
msg = {offsetx: evt.offsetx, offsety: evt.offsety};
}
mengembalikan msg;
}
Fungsi fdragStart (xele)
{
sakelar (fckbrs ())
{
Kasus 3:
window.getSelection (). RemoveAllranges ();
merusak;
bawaan:
Xele.setCapture ();
merusak;
}
}
fungsi fdragend (xele)
{
sakelar (fckbrs ())
{
Kasus 3:
window.getSelection (). RemoveAllranges ();
merusak;
bawaan:
Xele.releasecapture ();
merusak;
}
}
fungsi fckbrs ()
{
Switch (navigator.appname)
{
kasus 'opera': return 2;
case 'netscape': return 3;
Default: return 1;
}
}
var element = document.geteLementsbyTagname ("div");
untuk (var i = 0; i <element.length; i ++) {
if (elemen [i] .className == "drag") {
seret (elemen [i])}
}
</script>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.