การเลื่อนย้าย 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 กำหนดที่ที่ข้อมูลที่ถูกลากสามารถทำการทำการลงทะเบียนได้

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

งานนี้ทำโดยวิธี event.preventDefault() ของสัญญาณ 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 ไปที่วงกลม

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