การเลื่อนย้าย HTML5

กรุณาลากภาพ CodeW3C.com ไปยังสี่เหลี่ยมนี้

ย้ายตำแหน่ง

การย้ายตำแหน่ง (Drag และ Drop) คือคุณสมบัติที่ต่อตัว:

การย้ายตำแหน่งเป็นส่วนหนึ่งของมาตราฐาน HTML5: ทุกองค์ประกอบต่างๆ สามารถย้ายตำแหน่งได้:

การสนับสนุนโดยเบราเซอร์

ตัวเลขในตารางบ่งชี้เวอร์ชั่นของเบราเซอร์ที่สนับสนุนการย้ายตำแหน่งอย่างเต็มที่:

API
ย้ายตำแหน่ง 4.0 9.0 3.5 6.0 12.0

ตัวอย่าง HTML ย้ายตำแหน่ง

ด้านล่างนี้คือตัวอย่างง่ายของการย้ายตำแหน่ง:

ตัวอย่าง

<!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) ที่กำหนดข้อมูลที่จะย้ายตำแหน่ง:

วิธี setData() ของ dataTransfer กำหนดชนิดข้อมูลและค่าของข้อมูลที่สามารถย้ายตำแหน่งได้:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

ในตัวอย่างนี้ ชนิดข้อมูลคือ "text" และค่าคือ id ขององค์ประกอบที่สามารถย้ายตำแหน่งได้ ("drag1")。

拖到何处 - ondragover

จัดที่ไหน - ondragover

เหตุการณ์ ondragover กำหนดที่ไหนที่ข้อมูลที่ถูกลากสามารถจัดที่ไหน

โดยเริ่มต้น ข้อมูล/องค์ประกอบไม่สามารถจัดที่องค์ประกอบอื่นได้ ในการทำการลากและปล่อย พวกเราต้องหยุดการจัดการขององค์ประกอบนี้โดยเริ่มต้น

event.preventDefault()

ทำการจัดที่ไหน - ondrop

เมื่อปล่อยข้อมูลที่ถูกลาก เกิดเหตุการณ์ drop

ในตัวอย่างที่กล่าวข้างต้น อนุญาติการใช้ตัวแปร ondrop โดยเรียกฟังก์ชัน drop(event)：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

การอธิบายรหัส:

  • เรียก preventDefault() ในการป้องกันการจัดการข้อมูลโดยเริ่มต้นของเบราวเซอร์ (การจัดการของการปล่อยเหตุการณ์ drop คือการเปิดโดยลิงก์)
  • ได้รับข้อมูลที่ถูกลากผ่านวิธี dataTransfer.getData() โดยมีการกลับค่าของวิธีนี้เป็นชนิดเดียวกันกับที่ถูกกำหนดโดย setData()
  • ข้อมูลที่ถูกลากเข้ามาคือ id ขององค์ประกอบที่ถูกลาก ("drag1")
  • เพิ่มองค์ประกอบที่ถูกลากเข้ามาใส่องค์ประกอบที่ถูกจัดไว้

ตัวอย่างเพิ่มเติม

ลากภาพเข้ามา

แบบอย่างของการลากภาพที่เกี่ยวข้องกับสององค์ประกอบ <div> ระหว่างกัน:

กรุณาลากภาพ CodeW3C.com ไปยังสี่เหลี่ยมนี้

ทดลองด้วยตัวเอง