เนื้อหาของบทความนี้เกี่ยวกับวิธีการใช้ฟังก์ชั่นการลากองค์ประกอบ HTML ใน HTML5/"> HTML5 ในการใช้การลากและวางก่อน HTML5 คุณต้องใช้ JS ตอนนี้ HTML5 รองรับการลากและวางฟังก์ชั่นภายใน
1. สร้างวัตถุลากเราสามารถบอกเบราว์เซอร์ผ่านแอตทริบิวต์ draggable ซึ่งองค์ประกอบจำเป็นต้องใช้ฟังก์ชันการลากและวาง Draggable มีสามค่า: จริง: องค์ประกอบสามารถลากได้; เท็จ: ไม่สามารถลากองค์ประกอบ; อัตโนมัติ: เบราว์เซอร์กำหนดว่าองค์ประกอบสามารถลากด้วยตัวเองได้หรือไม่
ค่าเริ่มต้นของระบบคืออัตโนมัติ แต่เบราว์เซอร์รองรับฟังก์ชั่นการลากและดร็อปที่แตกต่างกันขององค์ประกอบที่แตกต่างกันในกรณีของอัตโนมัติเช่น: รองรับวัตถุ IMG แต่ไม่รองรับวัตถุ DIV ดังนั้นหากคุณต้องการลากองค์ประกอบคุณควรตั้งค่า Draggale ให้เป็นจริง มาดูตัวอย่างด้านล่าง:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
#src> *
-
ลอย: ซ้าย;
-
#target, #src> img
-
เส้นขอบ: สีดำทึบบาง;
Padding: 2px;
มาร์จิ้น: 4px;
-
#เป้า
-
ความสูง: 123px;
ความกว้าง: 220px;
TEXT-ALIGN: CENTER;
แสดง: ตาราง;
-
#Target> P
-
แสดง: ตารางเซลล์;
แนวตั้ง-แนว: กลาง;
-
#target> img
-
มาร์จิ้น: 1px;
-
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "เป้าหมาย">
<p id = "msg">
วางที่นี่ </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("เป้าหมาย");
</script>
</body>
</html>
เอฟเฟกต์การทำงาน:
2. จัดการเหตุการณ์ลากและวางตอนนี้ให้เข้าใจเหตุการณ์ที่เกี่ยวข้องกับการลาก มีสองประเภทของเหตุการณ์หนึ่งคือเหตุการณ์ของวัตถุลากและอีกเหตุการณ์หนึ่งคือเหตุการณ์ของพื้นที่วาง เหตุการณ์ลากรวมถึง: DragStart: ทริกเกอร์เมื่อเริ่มการลากองค์ประกอบ; ลาก: ทริกเกอร์ระหว่างการลากองค์ประกอบ; Dragend: ทริกเกอร์เมื่อการลากองค์ประกอบสิ้นสุดลง ลองตัวอย่างด้านล่าง:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
#src> *
-
ลอย: ซ้าย;
-
#target, #src> img
-
เส้นขอบ: สีดำทึบบาง;
Padding: 2px;
มาร์จิ้น: 4px;
-
#เป้า
-
ความสูง: 123px;
ความกว้าง: 220px;
TEXT-ALIGN: CENTER;
แสดง: ตาราง;
-
#Target> P
-
แสดง: ตารางเซลล์;
แนวตั้ง-แนว: กลาง;
-
#target> img
-
มาร์จิ้น: 1px;
-
img.dragged
-
พื้นหลังสี: ส้ม;
-
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "เป้าหมาย">
<p id = "msg">
วางที่นี่ </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("เป้าหมาย");
var msg = document.getElementById ("msg");
src.ondragstart = function (e) {
e.target.classlist.add ("ลาก");
-
src.ondragend = function (e) {
e.target.classlist.remove ("ลาก");
msg.innerhtml = "วางที่นี่";
-
src.ondrag = function (e) {
msg.innerhtml = e.target.id;
-
</script>
</body>
</html>
เอฟเฟกต์การทำงาน:
3. สร้างพื้นที่จัดส่งลองดูเหตุการณ์ที่เกี่ยวข้องกับพื้นที่จัดส่ง: Dragenter: ทริกเกอร์เมื่อวัตถุลากเข้าสู่พื้นที่จัดส่ง; Dragover: ทริกเกอร์เมื่อวัตถุลากเคลื่อนที่ในพื้นที่ส่งมอบ; Dragleave: วัตถุลากไม่ได้ส่งไปยังพื้นที่ส่งมอบและเรียกใช้เมื่อออกจากพื้นที่ส่งมอบ; Drop: ทริกเกอร์เมื่อวางวัตถุลากในพื้นที่ส่งมอบ
ลองมาดูตัวอย่าง:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
#src> *
-
ลอย: ซ้าย;
-
#target, #src> img
-
เส้นขอบ: สีดำทึบบาง;
Padding: 2px;
มาร์จิ้น: 4px;
-
#เป้า
-
ความสูง: 123px;
ความกว้าง: 220px;
TEXT-ALIGN: CENTER;
แสดง: ตาราง;
-
#Target> P
-
แสดง: ตารางเซลล์;
แนวตั้ง-แนว: กลาง;
-
#target> img
-
มาร์จิ้น: 1px;
-
img.dragged
-
พื้นหลังสี: LightGrey;
-
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "เป้าหมาย">
<p id = "msg">
วางที่นี่ </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("เป้าหมาย");
var msg = document.getElementById ("msg");
var draggedid;
target.ondragenter = handledrag;
target.ondragover = handledrag;
ฟังก์ชั่น handledrag (e) {
E.preventDefault ();
-
target.ondrop = function (e) {
var newelem = document.getElementById (draggedId) .clonenode (เท็จ);
target.innerhtml = "";
Target.appendchild (Newelem);
E.preventDefault ();
-
src.ondragstart = function (e) {
draggedId = e.target.id;
e.target.classlist.add ("ลาก");
-
src.ondragend = function (e) {
var elems = document.querySelectorAll (". ลาก");
สำหรับ (var i = 0; i <elems.length; i ++) {
elems [i] .classlist.remove ("ลาก");
-
-
</script>
</body>
</html>
ผลการทำงาน:
4. ใช้ dataTransferเราใช้ DataTransfer เพื่อส่งข้อมูลจากวัตถุลากไปยังพื้นที่จัดส่ง DataTransfer มีคุณสมบัติและวิธีการดังต่อไปนี้: ประเภท: ส่งคืนรูปแบบของข้อมูล getData (<format>): ส่งคืนข้อมูลรูปแบบที่ระบุ; setData (<format>, <data>): ตั้งค่าข้อมูลรูปแบบที่ระบุ; ClearData (<format>): ลบข้อมูลรูปแบบที่ระบุ; ไฟล์: ส่งคืนอาร์เรย์ไฟล์ที่จัดส่ง
ลองดูตัวอย่างต่อไปนี้เอฟเฟกต์ที่ได้รับนั้นเหมือนกับตัวอย่างที่ 3:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
#src> *
-
ลอย: ซ้าย;
-
#src> img
-
เส้นขอบ: สีดำทึบบาง;
Padding: 2px;
มาร์จิ้น: 4px;
-
#เป้า
-
เส้นขอบ: สีดำทึบบาง;
มาร์จิ้น: 4px;
-
#เป้า
-
ความสูง: 123px;
ความกว้าง: 220px;
TEXT-ALIGN: CENTER;
แสดง: ตาราง;
-
#Target> P
-
แสดง: ตารางเซลล์;
แนวตั้ง-แนว: กลาง;
-
img.dragged
-
พื้นหลังสี: ส้ม;
-
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "เป้าหมาย">
<p id = "msg">
วางที่นี่ </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("เป้าหมาย");
target.ondragenter = handledrag;
target.ondragover = handledrag;
ฟังก์ชั่น handledrag (e) {
E.preventDefault ();
-
target.ondrop = function (e) {
var droppedid = e.datAtransfer.getData ("ข้อความ");
var newelem = document.getElementById (droppEdid) .clonenode (เท็จ);
target.innerhtml = "";
Target.appendchild (Newelem);
E.preventDefault ();
-
src.ondragstart = function (e) {
E.DatAtRansfer.setData ("ข้อความ", e.target.id);
e.target.classlist.add ("ลาก");
-
src.ondragend = function (e) {
var elems = document.querySelectorAll (". ลาก");
สำหรับ (var i = 0; i <elems.length; i ++) {
elems [i] .classlist.remove ("ลาก");
-
-
</script>
</body>
</html>
5. ลากและวางไฟล์HTML5 รองรับไฟล์ API ซึ่งช่วยให้เราสามารถจัดการไฟล์ท้องถิ่น โดยทั่วไปเราไม่ได้ใช้ไฟล์ API โดยตรง เราสามารถใช้ร่วมกับคุณสมบัติอื่น ๆ เช่นการรวมเอฟเฟกต์การลากและวางดังแสดงในตัวอย่างต่อไปนี้:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
ร่างกาย> *
-
ลอย: ซ้าย;
-
#เป้า
-
เส้นขอบ: สีดำสองเท่าขนาดกลาง;
มาร์จิ้น: 4px;
ความสูง: 75px;
ความกว้าง: 200px;
TEXT-ALIGN: CENTER;
แสดง: ตาราง;
-
#Target> P
-
แสดง: ตารางเซลล์;
แนวตั้ง-แนว: กลาง;
-
โต๊ะ
-
มาร์จิ้น: 4px;
การล่มสลายของชายแดน: การล่มสลาย;
-
th, td
-
Padding: 4px;
-
</style>
</head>
<body>
<div id = "เป้าหมาย">
<p id = "msg">
วางไฟล์ที่นี่ </p>
</div>
<table id = "data">
</table>
<script>
var target = document.getElementById ("เป้าหมาย");
target.ondragenter = handledrag;
target.ondragover = handledrag;
ฟังก์ชั่น handledrag (e) {
E.preventDefault ();
-
target.ondrop = function (e) {
var files = E.DatAtRansfer.files;
var TableElem = document.getElementById ("data");
TableElem.innerhtml = "<tr> <th> ชื่อ </th> <th> พิมพ์ </th> <th> ขนาด </th> </tr>";
สำหรับ (var i = 0; i <files.length; i ++) {
var row = "<tr> <td>" + ไฟล์ [i] .name + "</td> <td>" + ไฟล์ [i] .type + "</td> <td>" + ไฟล์ [i] .size + "</td> </tr>";
TableElem.innerhtml += แถว;
-
E.preventDefault ();
-
</script>
</body>
</html>
DataTransfer ส่งคืนวัตถุ FileList ซึ่งเราสามารถถือว่าเป็นวัตถุอาร์เรย์ไฟล์และไฟล์มีคุณสมบัติต่อไปนี้: ชื่อ: ชื่อไฟล์; ประเภท: ประเภทไฟล์ (ประเภท MIME); ขนาด: ขนาดไฟล์
เอฟเฟกต์การทำงาน:
6. อัปโหลดไฟล์ต่อไปนี้เป็นตัวอย่างของการอัปโหลดไฟล์โดยการลากและวาง AJAX
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
.โต๊ะ
-
แสดง: ตาราง;
-
.แถว
-
แสดง: แถวโต๊ะ;
-
. เซลล์
-
แสดง: ตารางเซลล์;
ช่องว่าง: 5px;
-
.ฉลาก
-
TEXT-ALIGING: ถูกต้อง;
-
#เป้า
-
เส้นขอบ: สีดำสองเท่าขนาดกลาง;
มาร์จิ้น: 4px;
ความสูง: 50px;
ความกว้าง: 200px;
TEXT-ALIGN: CENTER;
แสดง: ตาราง;
-
#Target> P
-
แสดง: ตารางเซลล์;
แนวตั้ง-แนว: กลาง;
-
</style>
</head>
<body>
<form id = "fruitform" method = "post" action = "/uploadhandler.ashx">
<div>
<div>
<div>
กล้วย: </div>
<div>
<name input = "Bananas" value = "2" /> </div>
</div>
<div>
<div>
แอปเปิ้ล: </div>
<div>
<input name = "แอปเปิ้ล" value = "5" /> </div>
</div>
<div>
<div>
เชอร์รี่: </div>
<div>
<input name = "เชอร์รี่" value = "20" /> </div>
</div>
<div>
<div>
ไฟล์: </div>
<div>
<input type = "file" name = "file" /> </div>
</div>
<div>
<div>
รวม: </div>
<div id = "ผลลัพธ์">
รายการ </div>
</div>
</div>
<div id = "เป้าหมาย">
<p id = "msg">
วางไฟล์ที่นี่ </p>
</div>
<button id = "ส่ง" type = "ส่ง">
ส่งแบบฟอร์ม </button>
</form>
<script type = "text/javascript">
var target = document.getElementById ("เป้าหมาย");
var httprequest;
VAR FileList;
target.ondragenter = handledrag;
target.ondragover = handledrag;
ฟังก์ชั่น handledrag (e) {
E.preventDefault ();
-
target.ondrop = function (e) {
FileList = E.DatAtRansfer.files;
E.preventDefault ();
-
document.getElementById ("ส่ง"). onclick = ฟังก์ชั่น handlebuttonpress (e) {
E.preventDefault ();
var form = document.getElementById ("fruitform");
var formData = new FormData (แบบฟอร์ม);
ถ้า (fileList) {
สำหรับ (var i = 0; i <fileList.length; i ++) {
formData.Append ("ไฟล์" + i, fileList [i]);
-
-
httprequest = ใหม่ xmlhttprequest ();
httprequest.onreadystatechange = handleresponse;
httprequest.open ("โพสต์", form.action);
httprequest.send (formdata);
-
ฟังก์ชั่น handlerEsponse () {
if (httprequest.readystate == 4 && httprequest.status == 200) {
var data = json.parse (httprequest.responsetext);
document.getElementById ("ผลลัพธ์"). innerhtml = "คุณสั่ง" + data.total + "รายการ";
-
-
</script>
</body>
</html>
ผล:
ตัวอย่างข้างต้นบางตัวอย่างอาจมีเบราว์เซอร์ที่แตกต่างกัน ฉันใช้เบราว์เซอร์ Chrome ยกเว้นตัวอย่างที่ 5 และ 6 ที่ไม่รองรับหลายไฟล์ตัวอย่างอื่น ๆ จะทำงานตามปกติ คุณสามารถดาวน์โหลดตัวอย่าง
ที่อยู่ดาวน์โหลดตัวอย่าง: html5guide.draggable.rar