HTML5 ลากและวาง

ก่อนหน้านี้: HTML5 แบบอินไลน์ SVG

ถัดไป: HTML5 geopositioning

ลากและวาง (ลากและวาง) เป็นส่วนหนึ่งของมาตรฐาน HTML5

W3cschool ไอคอนและลากไปยังรูปสี่เหลี่ยมผืนผ้า

ลากและวาง

ลากและวางเป็นคุณสมบัติทั่วไปที่มีการรวบรวมข้อมูลไปยังสถานที่อื่นหลังจากที่วัตถุ

ใน HTML5 ลากและวางเป็นส่วนหนึ่งของมาตรฐานองค์ประกอบใด ๆ สามารถลากและวาง

สนับสนุนเบราว์เซอร์

Internet Explorer 9 +, Firefox, Opera, Chrome และ Safari ลากสนับสนุน

หมายเหตุ: Safari 5.1.2 ไม่สนับสนุนการลาก

HTML5 ลากและวางตัวอย่าง

ตัวอย่างต่อไปนี้คือการลากและวางตัวอย่าง:

ตัวอย่าง

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

ลอง»

มันอาจจะดูเหมือนซับซ้อนน้อย แต่เราก็สามารถที่จะศึกษาส่วนต่าง ๆ ของการลากและวางเหตุการณ์

องค์ประกอบที่มีการตั้งค่าที่จะลดลง

ครั้งแรกในการที่จะทำให้องค์ประกอบที่ลากตั้งแอตทริบิวต์ที่ลากไปจริง:

ลากอะไร - ondragstart และ setData ()

จากนั้นเมื่อองค์ประกอบถูกลากจัดหาสิ่งที่จะเกิดขึ้น

ในตัวอย่างข้างต้นแอตทริบิวต์ ondragstart เรียกฟังก์ชั่นการลาก (event) ซึ่งได้กำหนดข้อมูลที่ถูกลาก

dataTransfer.setData () วิธีการตั้งค่าชนิดข้อมูลและความคุ้มค่าลากข้อมูล:

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

ในตัวอย่างนี้ชนิดข้อมูลเป็น "ข้อความ" ค่าเป็นรหัสองค์ประกอบที่ลาก ( "drag1")

ที่จะนำ - OnDragOver

OnDragOver เหตุการณ์ที่ระบุว่าจะวางข้อมูลที่ถูกลาก

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

ทำเช่นนี้โดยการเรียก OnDragOver event.preventDefault เหตุการณ์ () วิธีการ:

event.preventDefault()

ถูกวางไว้ - ondrop

เมื่อวางข้อมูลลากวางเหตุการณ์เกิดขึ้น

ในตัวอย่างข้างต้น ondrop แอตทริบิวต์เรียกฟังก์ชันลดลง (event):

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

คำอธิบายรหัสสินค้า:

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

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

ลากและวางภาพกลับมา
วิธีการลากและวางภาพระหว่างสอง <div> องค์ประกอบ