HTML5 - ลากและวาง
Drag and Drop (DnD) เป็นแนวคิด User Interface ที่มีประสิทธิภาพซึ่งทำให้ง่ายต่อการคัดลอกจัดลำดับและลบรายการด้วยความช่วยเหลือของการคลิกเมาส์ วิธีนี้ช่วยให้ผู้ใช้สามารถคลิกปุ่มเมาส์ค้างไว้เหนือองค์ประกอบลากไปยังตำแหน่งอื่นแล้วปล่อยปุ่มเมาส์เพื่อวางองค์ประกอบที่นั่น
เพื่อให้สามารถใช้งานการลากและวางด้วย HTML4 แบบเดิมนักพัฒนาอาจต้องใช้การเขียนโปรแกรม JavaScript ที่ซับซ้อนหรือเฟรมเวิร์ก JavaScript อื่น ๆ เช่น jQuery เป็นต้น
ตอนนี้ HTML 5 มาพร้อมกับ Drag and Drop (DnD) API ที่นำการสนับสนุน DnD ดั้งเดิมมาสู่เบราว์เซอร์ทำให้ง่ายต่อการเขียนโค้ด
HTML 5 DnD รองรับเบราว์เซอร์หลัก ๆ เช่น Chrome, Firefox 3.5 และ Safari 4 เป็นต้น
ลากและวางเหตุการณ์
มีหลายเหตุการณ์ที่เกิดขึ้นระหว่างขั้นตอนต่างๆของการดำเนินการลากและวาง เหตุการณ์เหล่านี้แสดงไว้ด้านล่าง -
| ซีเนียร์ | เหตุการณ์และคำอธิบาย |
|---|---|
| 1 | dragstart เริ่มทำงานเมื่อผู้ใช้เริ่มลากวัตถุ |
| 2 | dragenter เริ่มทำงานเมื่อเมาส์ถูกย้ายไปที่องค์ประกอบเป้าหมายเป็นครั้งแรกในขณะที่เกิดการลาก ผู้ฟังสำหรับเหตุการณ์นี้ควรระบุว่าอนุญาตให้วางตำแหน่งนี้หรือไม่ หากไม่มีผู้ฟังหรือผู้ฟังไม่มีการดำเนินการใด ๆ จะไม่อนุญาตให้ปล่อยโดยค่าเริ่มต้น |
| 3 | dragover เหตุการณ์นี้จะเริ่มทำงานเมื่อเมาส์ถูกย้ายไปที่องค์ประกอบเมื่อเกิดการลาก โดยส่วนใหญ่แล้วการดำเนินการที่เกิดขึ้นระหว่างผู้ฟังจะเหมือนกับเหตุการณ์ dragenter |
| 4 | dragleave เหตุการณ์นี้จะเริ่มทำงานเมื่อเมาส์ออกจากองค์ประกอบในขณะที่เกิดการลาก ผู้ฟังควรลบเครื่องหมายไฮไลต์หรือเครื่องหมายแทรกที่ใช้สำหรับแสดงความคิดเห็น |
| 5 | drag จะเริ่มทำงานทุกครั้งที่เลื่อนเมาส์ในขณะที่กำลังลากวัตถุ |
| 6 | drop เหตุการณ์การดร็อปจะเริ่มทำงานบนองค์ประกอบที่เกิดการดร็อปเมื่อสิ้นสุดการดำเนินการลาก ผู้ฟังจะต้องรับผิดชอบในการดึงข้อมูลที่ถูกลากและใส่ไว้ที่ตำแหน่งวาง |
| 7 | dragend เริ่มทำงานเมื่อผู้ใช้ปล่อยปุ่มเมาส์ขณะลากวัตถุ |
Note- โปรดทราบว่าเหตุการณ์ลากเท่านั้นที่จะเริ่มทำงาน เหตุการณ์ของเมาส์เช่นmousemoveจะไม่ทำงานระหว่างการลาก
วัตถุ DataTransfer
วิธีการฟังเหตุการณ์สำหรับเหตุการณ์การลากและวางทั้งหมดยอมรับ Event ซึ่งมีแอตทริบิวต์แบบอ่านอย่างเดียวที่เรียกว่า dataTransfer.
event.dataTransfer ผลตอบแทน DataTransfer วัตถุที่เกี่ยวข้องกับเหตุการณ์ดังต่อไปนี้ -
function EnterHandler(event) {
DataTransfer dt = event.dataTransfer;
.............
}DataTransferวัตถุเก็บข้อมูลเกี่ยวกับการดำเนินการลากและวาง ข้อมูลนี้สามารถเรียกดูและตั้งค่าในรูปแบบของแอตทริบิวต์ต่างๆที่เกี่ยวข้องกับวัตถุ DataTransfer ตามที่อธิบายด้านล่าง -
| ซีเนียร์ | แอตทริบิวต์ DataTransfer และคำอธิบาย |
|---|---|
| 1 | dataTransfer.dropEffect [ = value ]
|
| 2 | dataTransfer.effectAllowed [ = value ]
|
| 3 | dataTransfer.types ส่งคืน DOMStringList ที่แสดงรายการรูปแบบที่กำหนดไว้ในเหตุการณ์ dragstart นอกจากนี้หากมีการลากไฟล์ประเภทใดประเภทหนึ่งจะเป็นสตริง "ไฟล์" |
| 4 | dataTransfer.clearData ( [ format ] ) ลบข้อมูลของรูปแบบที่ระบุ ลบข้อมูลทั้งหมดหากไม่ใส่อาร์กิวเมนต์ |
| 5 | dataTransfer.setData(format, data) เพิ่มข้อมูลที่ระบุ |
| 6 | data = dataTransfer.getData(format) ส่งคืนข้อมูลที่ระบุ หากไม่มีข้อมูลดังกล่าวให้ส่งคืนสตริงว่าง |
| 7 | dataTransfer.files ส่งคืน FileList ของไฟล์ที่ถูกลากถ้ามี |
| 8 | dataTransfer.setDragImage(element, x, y) ใช้องค์ประกอบที่กำหนดเพื่ออัปเดตข้อเสนอแนะการลากแทนที่คำติชมที่ระบุไว้ก่อนหน้านี้ |
| 9 | dataTransfer.addElement(element) เพิ่มองค์ประกอบที่กำหนดในรายการองค์ประกอบที่ใช้ในการแสดงผลการตอบรับการลาก |
ลากและวางกระบวนการ
ต่อไปนี้เป็นขั้นตอนที่ต้องดำเนินการเพื่อใช้งาน Drag and Drop -
ขั้นตอนที่ 1 - สร้าง Object Draggable
นี่คือขั้นตอนที่ต้องดำเนินการ -
หากคุณต้องการลากองค์ประกอบคุณต้องตั้งค่าไฟล์ draggable แอตทริบิวต์ถึง true สำหรับองค์ประกอบนั้น
ตั้งค่าตัวฟังเหตุการณ์สำหรับ dragstart ที่เก็บข้อมูลที่กำลังลาก
ผู้ฟังเหตุการณ์ dragstart จะตั้งค่าเอฟเฟกต์ที่อนุญาต (คัดลอกย้ายลิงค์หรือบางอย่างรวมกัน)
ต่อไปนี้เป็นตัวอย่างในการทำให้วัตถุลากได้ -
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type = "text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ขั้นตอนที่ 2 - การทิ้งวัตถุ
ในการยอมรับการดร็อปเป้าหมายการดร็อปต้องฟังเหตุการณ์อย่างน้อยสามเหตุการณ์
dragenterเหตุการณ์ซึ่งใช้เพื่อกำหนดว่าเป้าหมายการดร็อปนั้นจะยอมรับการดร็อปหรือไม่ หากต้องการรับการดร็อปกิจกรรมนี้จะต้องถูกยกเลิก
dragoverเหตุการณ์ซึ่งใช้ในการกำหนดความคิดเห็นที่จะแสดงต่อผู้ใช้ หากเหตุการณ์ถูกยกเลิกข้อเสนอแนะ (โดยทั่วไปคือเคอร์เซอร์) จะได้รับการอัปเดตตามค่าแอตทริบิวต์ dropEffect
สุดท้าย drop เหตุการณ์ซึ่งช่วยให้สามารถดำเนินการลดลงจริงได้
ต่อไปนี้เป็นตัวอย่างการวางวัตถุลงในวัตถุอื่น -
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>
<div id="boxA" draggable="true" ondragstart="return dragStart(event)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
</center>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -