ลากและวางเป็นส่วนหนึ่งของมาตรฐาน HTML5
ลากภาพข้างต้นลงในรูปสี่เหลี่ยมผืนผ้า
ในรูปแบบ HTML
ข้อกำหนดร่าง HTML5 ทำงานรวมถึงการสนับสนุนการลากและวาง HTML5 สนับสนุนแตกต่างกันของการลากและวางคุณสมบัติรวมทั้ง:
- ลากและวางข้อความและรหัส HTML
- ลากและวางองค์ประกอบ HTML
- ลากและวางไฟล์
ขึ้นอยู่กับการดำเนินการที่จำเป็นซึ่งเป็นหนึ่งในประเภทดังกล่าวข้างต้นสามารถนำมาใช้ โปรดทราบว่าเมื่อองค์ประกอบ HTML ถูกลากสำหรับการเคลื่อนย้ายตำแหน่งปัจจุบันรหัสของมันจะถูกส่งไปยังองค์ประกอบหลักปลายทาง; จึงส่งข้อความและถือได้ว่าเป็นกลุ่มแรก
แอพลิเคชันอีเมลบนเว็บของ Google Gmail สนับสนุนการลากและวางของภาพและเอกสารแนบในเบราว์เซอร์ใหม่ล่าสุด Google Chrome และ Safari ของ Apple (5.x) และการค้นหารูปภาพของ Google สนับสนุนการลากและวาง
ลากแล้ววาง
ลากและวางเป็นคุณลักษณะที่พบบ่อยมาก มันคือเมื่อคุณ "grab" วัตถุและลากไปยังตำแหน่งที่แตกต่างกัน
ใน HTML5 ลากและวางเป็นส่วนหนึ่งของมาตรฐานและองค์ประกอบใด ๆ สามารถลาก
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ลากและวาง
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
ลาก HTML และตัวอย่าง Drop
ตัวอย่างด้านล่างคือลากง่ายและเป็นตัวอย่างวาง:
ตัวอย่าง
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> ลองตัวเอง» มันอาจจะดูซับซ้อน แต่ช่วยให้ผ่านไปทุกชิ้นส่วนที่แตกต่างกันของการลากและวางเหตุการณ์
ทำให้ธาตุที่สามารถลากได้
ครั้งแรกของทั้งหมด: เพื่อให้องค์ประกอบลากตั้ง draggable แอตทริบิวต์ true :
<img draggable="true">
สิ่งที่ต้องลาก - ondragstart และ setData()
จากนั้นระบุสิ่งที่ควรจะเกิดขึ้นเมื่อองค์ประกอบถูกลาก
ในตัวอย่างข้างต้น ondragstart แอตทริบิวต์เรียกฟังก์ชั่น drag(event) ที่ระบุว่าข้อมูลที่จะลาก
dataTransfer. setData() dataTransfer. setData() วิธีการตั้งค่าชนิดของข้อมูลและความคุ้มค่าของข้อมูลลากไปนี้:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
ในกรณีนี้ชนิดข้อมูลเป็น "text" และมีค่าเป็น ID ขององค์ประกอบลาก ("drag1")
สถานที่ที่จะวาง - ondragover
ondragover เหตุการณ์ระบุว่าข้อมูลที่ลากสามารถลดลง
โดยค่าเริ่มต้น / ข้อมูลองค์ประกอบไม่สามารถลดลงในองค์ประกอบอื่น ๆ ที่จะช่วยให้ลดลงเราจะต้องป้องกันไม่ให้เกิดการจัดการเริ่มต้นขององค์ประกอบ
นี้จะกระทำโดยการเรียก event. preventDefault() event. preventDefault() วิธีการสำหรับ ondragover เหตุการณ์:
event . preventDefault()
ทำฝาก - ondrop
เมื่อข้อมูลที่ลากจะลดลงเหตุการณ์ที่เกิดขึ้นลดลง
ในตัวอย่างข้างต้น ondrop แอตทริบิวต์เรียกฟังก์ชั่น drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
รหัสอธิบาย:
- โทร preventDefault() เพื่อป้องกันไม่ให้การจัดการที่เริ่มต้นเบราว์เซอร์ของข้อมูล (default is open as link on drop)
- ได้รับข้อมูลที่ลากด้วย dataTransfer. getData() dataTransfer. getData() วิธีการ วิธีการนี้จะส่งกลับข้อมูลใด ๆ ที่ถูกกำหนดให้เป็นประเภทเดียวกันใน setData() วิธีการ
- ข้อมูลลากเป็น ID ขององค์ประกอบลากที่ ("drag1")
- ผนวกองค์ประกอบลากเข้าไปใน drop องค์ประกอบ
ลากภาพไปมา
วิธีการลาก (and drop) ภาพไปมาระหว่างสอง <div> องค์ประกอบ