ความคิดเห็น: ก่อน HTML5 เพื่อใช้การลากและวางการดำเนินการขององค์ประกอบหน้าเว็บจำเป็นต้องพึ่งพา Mousedown, Mousemove, Mouseup และ API อื่น ๆ เพื่อนำไปใช้กับรหัส JS จำนวนมาก ตอนนี้ HTML5 ช่วยลดความยากลำบากในการลากและลดการทำงานขององค์ประกอบหน้าเว็บ นอกเหนือจากการรองรับการลากและลดองค์ประกอบภายในเบราว์เซอร์แล้ว API ยังรองรับการลากข้อมูลระหว่างเบราว์เซอร์และแอปพลิเคชันอื่น ๆ
ก่อนที่ HTML5 จะใช้งานการลากและวางองค์ประกอบของหน้าเว็บเราจำเป็นต้องพึ่งพา Mousedown, Mousemove, Mouseup และ API อื่น ๆ เพื่อนำไปใช้กับรหัส JS จำนวนมาก HTML5 แนะนำ API ที่รองรับการทำงานแบบลากและดรอปโดยตรงซึ่งช่วยลดความยากลำบากในการเขียนโปรแกรมลากและลดการดำเนินงานขององค์ประกอบหน้าเว็บ นอกเหนือจากการรองรับการลากและลดองค์ประกอบภายในเบราว์เซอร์แล้ว API เหล่านี้ยังรองรับการลากข้อมูลระหว่างเบราว์เซอร์และแอปพลิเคชันอื่น ๆ
บทความนี้ใช้ตัวอย่างง่ายๆเพื่อสาธิตวิธีใช้การลากและวาง APIs ใน HTML5
ฉาก:
ดังที่แสดงในรูปด้านล่างเราต้องการนำไปใช้:
ลากรูปภาพจากพื้นที่อัลบั้มด้านซ้ายไปยังพื้นที่ถังขยะด้านขวาโดยการลากและลดลง ในระหว่างกระบวนการลากควรมีการเตือนชิ้นส่วนการเตือนความอบอุ่นทันทีและการดำเนินการลากและวางกำลังดำเนินการอยู่ในขณะนี้
วิธีการดำเนินการ:
ดังที่แสดงในอินเทอร์เฟซด้านบนรหัส HTML นั้นค่อนข้างง่ายดังนี้:
<! doctype html>
<html>
<head>
<title> HTML5 ใช้การทำงานแบบลากและวาง </title>
<meta charset = "utf-8"/>
<style>
.อัลบั้ม
-
ชายแดน: 3px ประ #CCC;
ลอย: ซ้าย;
มาร์จิ้น: 10px;
ต่ำสุด: 100px;
Padding: 10px;
ความกว้าง: 220px;
-
</style>
</head>
<body ">
<div>
<H2> การเตือนความจำที่อบอุ่น: คุณสามารถลากรูปภาพลงในถังขยะได้โดยตรง </h2>
</div>
<div>
<H2> อัลบั้ม </h2>
<img draggable = "true" src = "img /bg_01.png" />
<img draggable = "true" src = "img /bg_02.png" />
<img draggable = "true" src = "img /bg_03.png" /> >>
</div>
<div>
<H2> ถังขยะสามารถ </h2>
</div>
<br/>
</body>
</html>
หมายเหตุ: หากคุณต้องการใช้การทำงานแบบลากและวางคุณจะต้องเพิ่มแอตทริบิวต์ Draggable = True ให้กับองค์ประกอบที่จะถูกลากและลดลง
ถัดไปเพิ่มรหัส JS ต่อไปนี้ในเหตุการณ์ ONLOAD ความคิดเห็นมีรายละเอียดมากขึ้นและจะไม่ถูกอธิบายแยกต่างหาก
<script>
ฟังก์ชัน init () {
var info = document.getElementById ("ข้อมูล");
// รับองค์ประกอบการลากและวาง ตัวอย่างนี้คือ Div ที่อัลบั้มตั้งอยู่
var src = document.getElementById ("อัลบั้ม");
// เริ่มการลากและวางการทำงาน
src.ondragstart = function (e) {
// รับรหัสรูปภาพ Drag-and Drop
var dragimgid = e.target.id;
// รับองค์ประกอบลาก
var dragimg = document.getElementById (dragimgid);
// การดำเนินการลากและวางจะสิ้นสุดลง
dragimg.ondragend = function (e) {
// กู้คืนข้อความเตือนความจำ
info.innerhtml = "<h2> การเตือนความจำเชิงสร้างสรรค์: คุณสามารถลากรูปภาพลงในถังขยะโดยตรงสามารถ </h2>";
-
E.DatAtRansfer.setData ("ข้อความ", Dragimgid);
-
// drag และ drop process
src.ondrag = function (e) {
info.innerhtml = "<h2>-รูปภาพกำลังถูกลาก-</h2>";
-
// รับองค์ประกอบการลากและวางเป้าหมาย
var target = document.getElementById ("ถังขยะ");
// ปิดการประมวลผลเริ่มต้น;
target.ondragenter = function (e) {
E.preventDefault ();
-
target.ondragover = function (e) {
E.preventDefault ();
-
// มีบางอย่างลากและลดลงไปที่องค์ประกอบเป้าหมาย
target.ondrop = function (e) {
var draggedId = E.DatAtRansfer.getData ("ข้อความ");
// รับวัตถุ DOM ในอัลบั้ม
var oldelem = document.getElementById (draggedId);
// ลบโหนดของภาพถ่ายจากอัลบั้ม div
Oldelem.ParentNode.removeChild (Oldelem);
// เพิ่มโหนด Dom Photo ที่ลากลงในถังขยะ Div;
Target.appendchild (Oldelem);
info.innerhtml = "<h2> การเตือนความจำเชิงสร้างสรรค์: คุณสามารถลากรูปภาพลงในถังขยะโดยตรงสามารถ </h2>";
E.preventDefault ();
-
-
</script>
ตระหนักถึงผลกระทบ: