บทความนี้อธิบายวิธีการใช้เอฟเฟกต์การลากเลเยอร์การลากของโมดูล IgoogledivDrag โดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js ใช้เอฟเฟกต์เลเยอร์ลากของโมดูลลาก igoogle div </title>
<style type = "text/css">
*{มาร์จิ้น: 0px; Padding: 0px;}
ร่างกาย {ตำแหน่ง: ญาติ; ความกว้าง: 780px; ความสูง: 800px; เส้นขอบ: 1px Solid Red}
.drag {Width: 200px; ความสูง: 100px; ชายแดน: 1px Solid #000; มาร์จิ้น: 20px; พื้นหลัง: #FFFF}
.Drag H1 {margin: 0px; Padding: 0px; ขนาดตัวอักษร: 12px; ความสูง: 18px; ความสูงบรรทัด: 18px; ความเป็นมา:#E0E7F3; Indent-Indent: 20px; เคอร์เซอร์: Move;}
.Center {margin: 200px; เส้นขอบ: 3px Solid Red}
</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> ทดสอบ 2 </h1> </div>
<div> <h1> ทดสอบ 3 </h1> </div>
<div> <h1> ทดสอบ 4 </h1> </div>
<div> <h1> ทดสอบ 5 </h1> </div>
</body>
</html>
<script type = "text/javascript">
-
ผู้แต่ง: popper.w
เวอร์ชัน: v2.0
-
var dragzindexnumber = 0;
ฟังก์ชั่นลาก (obj) {
var ox, oy, ex, xy, tag = 0, mask = 0;
if (tag == 0) {
obj.onmousedown = ฟังก์ชั่น (e)
-
if (mask == 1) {return; -
obj.style.zindex = dragzindexnumber ++;
transp (obj, "เริ่ม")
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");
ด้วย (tempdiv.style)
-
ความกว้าง = obj.offsetWidth+"px";
ความสูง = obj.offSetheight+"px";
Border = "1px Dotted Red";
ตำแหน่ง = "สัมบูรณ์";
ซ้าย = obj.offsetleft+"px";
top = obj.offsettop+"px";
zindex = 999;
-
document.body.appendchild (tempdiv);
this.ele = tempdiv;
fdragstart (tempdiv);
document.body.onmousemove = function (e) {
ถ้า (tag == 1)
-
var e = e || window.event;
tempdiv.style.left = parseint (e.clientx) -ex+"px";
tempdiv.style.top = parseint (e.clienty) -ey+"px";
-
อื่น {ถ้า (! tempdiv == null) tempdiv.parentnode.removechild (tempdiv)}
-
tempdiv.onmouseup = function (e)
-
var e = e || window.event;
fdragend (tempdiv);
obj.style.position = "สัมบูรณ์";
ภาพยนตร์ (OBJ, ParseInt (E.Clientx) -EX-19, ParseInt (E.Clienty) -ey-20);
tempdiv.parentnode.removechild (tempdiv);
tag = 0;
-
-
-
-
ฟังก์ชั่นภาพยนตร์ (o, l, t) {
var a = 1;
หน้ากาก = 1;
var ol = parseInt (O.OffsetLeft);
var ot = parseInt (O.OffSettop);
var itimer = setInterval (function () {
ถ้า (a == 10)
-
transp (o, "end");
หน้ากาก = 0;
ClearInterval (itimer);
-
o.style.left = ol+a*(l-ol)/10+"px";
o.style.top = ot+a*(t-ot)/10+"px";
A ++;
}, 20);
-
ฟังก์ชั่น fcancleBubble (E)
-
var e = window.event || E;
ถ้า (e.preventDefault) E.preventDefault ();
else e.returnvalue = false;
-
ฟังก์ชั่น transp (o, โหมด) {
if (mode == "start") {
if (document.all) {
o.style.filter = "alpha (opacity = 50)";
}อื่น{
O.style.Opacity = 0.5;
-
-
อื่น {
if (document.all) {
o.style.filter = "alpha (opacity = 100)";
}อื่น{
O.style.Opacity = 1;
-
-
-
ฟังก์ชั่น getOffset (EVT)
-
var target = evt.target;
if (target.offsetleft == ไม่ได้กำหนด)
-
target = target.parentNode;
-
var pagecoord = getPagecoord (เป้าหมาย);
var eventCoord =
-
x: window.pagexoffset + evt.clientx
y: window.pageyoffset + evt.clienty
-
VAR OFFSET =
-
Offsetx: EventCoord.x - pagecoord.x
Offsety: EventCoord.y - pagecoord.y
-
ชดเชยกลับ;
-
ฟังก์ชั่น getpagecoord (องค์ประกอบ)
-
var coord = {x: 0, y: 0};
ในขณะที่ (องค์ประกอบ)
-
coord.x += element.offsetleft;
COFLOERN.Y += Element.OffSettop;
element = element.offsetParent;
-
Coord กลับ;
-
ฟังก์ชั่น getEventOffset (EVT)
-
var msg = "";
if (evt.offsetx == ไม่ได้กำหนด)
-
var evtoffsets = getOffset (EVT);
msg = {Offsetx: evtoffsets.offsetx, Offsety: evtoffsets.offsety};
-
อื่น
-
msg = {Offsetx: evt.offsetx, Offsety: evt.offsety};
-
return msg;
-
ฟังก์ชั่น fdragstart (xele)
-
สวิตช์ (fckbrs ())
-
กรณีที่ 3:
window.getSelection (). RemoveAllranges ();
หยุดพัก;
ค่าเริ่มต้น:
Xele.SetCapture ();
หยุดพัก;
-
-
ฟังก์ชั่น fdragend (xele)
-
สวิตช์ (fckbrs ())
-
กรณีที่ 3:
window.getSelection (). RemoveAllranges ();
หยุดพัก;
ค่าเริ่มต้น:
xele.releasecapture ();
หยุดพัก;
-
-
ฟังก์ชั่น fckbrs ()
-
Switch (Navigator.Appname)
-
กรณี 'โอเปร่า': return 2;
กรณี 'NetScape': return 3;
ค่าเริ่มต้น: return 1;
-
-
องค์ประกอบ var = document.getElementsByTagname ("div");
สำหรับ (var i = 0; i <element.length; i ++) {
if (element [i] .className == "drag") {
ลาก (องค์ประกอบ [i])}
-
</script>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน