เมื่อเร็ว ๆ นี้ ฉันเห็นเพื่อนบางคนบนอินเทอร์เน็ตกำลังมองหาการใช้งานแบบลากและวางที่คล้ายกับหน้าแรกส่วนบุคคลของ Google และพื้นที่ MSN และฉันพบตัวอย่างด้านล่าง แต่มีปัญหามากมายที่ฉันเขียนใหม่และปรับปรุงและสร้างรูปแบบทั่วไป ฟังก์ชั่น การใช้งานฟังก์ชั่นเฉพาะมีดังนี้:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>การสาธิตการลากและวางของ BlackSoul</title >
<!- -
____________________________________
|--------ผู้เขียนโดย BlackSoul---------|
|------------2006.03.30------ ---- ----|.
|------------QQ:9136194---- ---- -|
|------http://blacksoul.cnblogs.cn---|
================== ==== ===============
-->
<style type="text/css">
เนื้อความ
{
ระยะขอบ:0px
;
#aim /*ตั้งค่าสไตล์เลเยอร์เป้าหมาย*/
{
position:
absolute;/*สไตล์ที่จำเป็นในการควบคุมตำแหน่งของเลเยอร์*/
width:200px;
height:30px;
border:1px solid #666666;
;
}
#sourceLayer, #cloneLayer
{
ตำแหน่ง:สัมบูรณ์;/*รูปแบบที่จำเป็นในการควบคุม
ตำแหน่ง
ของ
เลเยอร์*/
ความกว้าง:300px
;
เส้นขอบ:1px ทึบ #666666;
.docked
{
จอแสดงผล: ไม่มี;
ตัวกรอง: อัลฟา (ความทึบ = 100);
}
.active
{
จอแสดงผล:บล็อก;
ตัวกรอง:อัลฟา(ความทึบ=70);
}
</style>
</head>
<ร่างกาย>
<div id="aim">ช่วงตำแหน่ง</div>
<div id="sourceLayer" unselectable
="off"><img src=" <div id="cloneLayer" class="docked" unselectable="off"> </div>
<script type="text/javascript" language="javascript">
<!--
/*
============================= =======
|--------ผู้เขียนโดย BlackSoul---------|
|------------2006.03.30----- ---------|.
------------QQ:9136194--- ----------|
|------http://blacksoul.cnblogs.cn---|
================= =================
*/
// ตั้งค่าวัตถุ
เลเยอร์
var sourceLayer
;
//กำหนดตำแหน่งเริ่มต้นของแต่ละเลเยอร์
varaimX
;
varvar
orgnX;
//ตัวแปรระหว่างการลาก
var Draging = false; //ไม่ว่าจะถูกลาก
var offsetX = 0; //ออฟเซ็ตซ้ายและขวาในทิศทาง X
var offsetY = 0;
// กลับ; / / ส่งคืนวัตถุภาพเคลื่อนไหว
var thisX; // ตำแหน่ง X ของเลเยอร์โคลนปัจจุบัน
var thisY; // ตำแหน่ง Y ของเลเยอร์โคลนปัจจุบัน
var
stepX; //
ความเร็วในการเคลื่อนที่
// เริ่มต้นข้อมูลการลาก
/*
เป้าหมาย initAimX x พิกัด
เป้าหมาย initAimY y พิกัด
แหล่งลาก initOrgnX x พิกัด
แหล่งลาก initOrgnY พิกัด y
*/
// รับวัตถุเลเยอร์
ฟัง
ก์ชั่น getLayer (inAim, inSource, inClone)
{
จุดมุ่งหมาย = document.getElementById (inAim);
sourceLayer
= document.getElementById (inSource);
ฟังก์ชั่น initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
AimX = initAimX
;AimY
= initAimY; orgnX;
orgnY = initOrgnY;
// กำหนดตำแหน่งของแต่ละเลเยอร์เริ่มต้น
Aim.style.pixelLeft
= AimX;
=จุดมุ่งหมายY;
sourceLayer.style.pixelLeft
= orgnX
;
sourceLayer.style.pixelTop
= orgnY;
// เตรียม
ฟังก์ชันลาก BeforeDrag()
{
if (event.button != 1)
{
return;
}
cloneLayer.innerHTML = sourceLayer.innerHTML; // คัดลอกเนื้อหาต้นฉบับของการลาก
offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;
cloneLayer.className = "ใช้งานอยู่
"
;
//ลาก
ฟังก์ชัน OnDrag()
{
if(!dragging)
{
return;
}
//อัปเดตตำแหน่ง
event.returnValue = false;
cloneLayer.style.pixelLeft = document.body.scrollLeft + event.clientX -
offsetX.style .pixelTop
;= document.body.scrollTop + event.clientY - offsetY;
}
//สิ้นสุด
ฟังก์ชันการลาก EndDrag()
{
if (event.button != 1)
{
return;
}
การลาก = false;
ถ้า (event.clientX >=จุดมุ่งหมาย.style.pixelLeft && event.clientX <= (aim.style.pixelLeft +จุดมุ่งหมาย.offsetWidth) &&
event.clientY >=จุดมุ่งหมาย.style.pixelTop && event.clientY <= (aim.style .pixelTop + Aim.offsetHeight))
{
//เลเยอร์การลากจะอยู่ในเป้าหมายและตำแหน่งไปยังตำแหน่งเป้าหมายโดยอัตโนมัติ
sourceLayer.style.pixelLeft = aim.style.pixelLeft
;
cloneLayer.className = "docked";
/*
** หลังจากเสร็จสิ้น คุณสามารถใช้ xml เพื่อบันทึกตำแหน่งปัจจุบันได้
** ครั้งถัดไปที่ผู้ใช้เข้าสู่ เลเยอร์
การลากต้นทางจะถูกเตรียมใช้งานเป็นข้อมูลในรูปแบบ xml
*/
}
อื่น
{
//ลากและวาง ตั้งอยู่นอกเลเยอร์เป้าหมาย เรียกคืนตำแหน่งต้นทางการลาก
thisX = cloneLayer.style.pixelLeft;
thisY = cloneLayer.style.pixelTop;
offSetX = Math.abs(thisX - orgnX);
offSetY = Math.abs (thisY - orgnY);
time = 500;//ตั้งเวลาภาพเคลื่อนไหว
stepX = Math.floor((offSetX/time)*20);
stepY
= Math.floor((offSetY/time)*20);
0)
ขั้นตอน X = 2;
ถ้า (ขั้นตอน Y == 0)
ขั้นตอน Y = 2;
//เริ่มภาพเคลื่อนไหวกลับ
moveStart(
)
;
ฟังก์ชั่น moveStart()
{
back = setInterval("MoveLayer();",15);
}
// ตั้ง
ค่าฟังก์ชันเอฟเฟกต์ภาพเคลื่อนไหวที่ส่งคืน MoveLayer()
{
// อยู่ที่ด้านซ้ายบนของเป้าหมาย
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style
.pixelTop += stepY;
// หากการกระจัดเกินเป้าหมาย ให้ตั้งค่าความเร็วเป็น pix และเลื่อนกลับไปในทิศทางตรงกันข้าม
pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1;
}
//หากพิกัดบนแกน X หรือ Y เท่ากัน จะไม่มีการกระจัดเกิดขึ้น
ถ้า(cloneLayer.style .pixelLeft == orgnX)
{
stepX = 0;
}
if(cloneLayer .style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
สิ้นสุด
การย้าย()
;
// อยู่ที่ด้านซ้ายล่างของเป้าหมาย
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft += stepX
;
if(cloneLayer.style .pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop<
orgnY)
{
stepY = 1;
}
ถ้า
(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0;
(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.pixelTop==
orgnY)
{
EndMove()
;
// อยู่ที่ด้านขวาบนของเป้าหมาย
if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -=
stepX
;;
if(cloneLayer.style .pixelLeft < orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop>
orgnY)
{
stepY = 1;
}
ถ้า(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0;
if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.pixelTop == orgnY)
{
EndMove(
}
}
// อยู่ที่ด้านขวาบนของเป้าหมาย
if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -= stepX
;
;
if(cloneLayer.style .pixelLeft < orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop < orgnY)
{
stepY = 1;
}
ถ้า(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0
;
if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.pixelTop == orgnY)
{
EndMove(
}
}
// ไปถึงเป้าหมาย
อื่น
{
EndMove(
)
;
//หยุดฟังก์ชันการส่งกลับ
EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY
;
cloneLayer.style.pixelLeft = orgnX
;
clearInterval (ด้านหลัง);
}
//ฟังก์ชั่นการลากหลัก ฟังก์
ชั่น startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
getLayer(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag
; onmousemove = OnDrag; //หากใช้ cloneLayer ที่นี่ เนื้อหาใน cloneLayer จะถูกเลือกระหว่างการลาก และข้อบกพร่องบางอย่างจะปรากฏขึ้น...
cloneLayer.onmouseup = EndDrag
;
//Call
startDraging("aim", "sourceLayer", "cloneLayer",300,200,20,20);
//-->
</script>
</body>
</html>
ควรสังเกตว่า:
1. จำเป็นต้องมีคำจำกัดความของ div สามแบบใน HTML ตำแหน่งของสไตล์จะต้องถูกกำหนดให้เป็นสัมบูรณ์ในทั้งสามเลเยอร์เพื่อควบคุมตำแหน่ง
1. เลเยอร์เป้าหมาย (จุดมุ่งหมาย) หน้าที่หลักของมันคือการกำหนดตำแหน่งที่การลากมีผล
2. ลากแหล่งที่มา (sourceLayer) ให้ความสนใจกับการตั้งค่าแอตทริบิวต์ unselectable = "ปิด" (นี่แปลก การตั้งค่าเป็นช่วงจะเป็นการเลือกเนื้อหาเลเยอร์ในระหว่างกระบวนการลาก)
3. เลเยอร์ที่ใช้สำหรับการคัดลอก (cloneLayer)
2. การเรียกใช้ฟังก์ชัน
คำอธิบายพารามิเตอร์ startDraging:
ชื่อเลเยอร์เป้าหมาย initAim ชื่อต้นทางลาก initSource ชื่อ initClone ของเลเยอร์ที่ใช้สำหรับการคัดลอก
initAimX พิกัดแกน x ของเลเยอร์เป้าหมาย initAimY พิกัดแกน y ของเลเยอร์เป้าหมาย initOrgnX พิกัด x ของต้นทางการลาก initOrgnY พิกัดแกน Y ของต้นทางการลาก
ได้รับการทดสอบใน IE เท่านั้น มีการเพิ่มความคิดเห็นเข้าไป รหัส คุณสามารถเพิ่มการดำเนินการเขียน xml ได้หลังจากที่แหล่งที่มาของการลากถึงเป้าหมายแล้วบันทึกข้อมูลของเค้าโครงหน้าที่ผู้ใช้กำหนดไว้ คำแนะนำสำหรับการปรับปรุง ขณะนี้ฉันกำลังพัฒนาชุดควบคุม ajax ตาม asp.net2.0 ฉันหวังว่าคุณจะมีการสื่อสารมากขึ้น
PS: บทความแรกในสวนบล็อกของฉัน ฉันหวังว่าคุณจะสามารถสนับสนุนฉันได้มาก .