HTML5 Drag and Drop
HTML5
HTML เป็นภาษามาร์กอัป (Markup) ที่ใช้สำหรับจัดโครงสร้างและกำหนดคุณสมบัติต่างๆ เพื่อแสดงเนื้อหาบนเว็บไซต์ ในเดือนตุลาคม 2014 ได้เปิดตัวสมบูรณ์ของ HTML 5 พร้อมกับพัฒนามาตรฐานของ HTML และเพิ่มเทคโนโลยีหลักหลายอย่าง พัฒนาโดยสมาคม World Wide Web กับ WHATWG และกำลังพัฒนาต่อเนื่องไปสู่ HTML 5.1 ซึ่งตามแผนตัวสมบูรณ์ของรุ่น 5.1 จะปล่อยออกมาในปี 2016
Drag and Drop
สำหรับ APIs ใหม่ของ HTML 5 บทความนี้จะขอพูดถึงตัว Drag-and-drop (DnD) ซึ่งการทำงานของมันจะเป็นการเคลื่อนย้ายวัตถุ ผู้ใช้จะวางอุปกรณ์ชี้ตำแหน่งไปที่วัตถุที่ต้องการย้ายและลากวัตถุไปยัง ตำแหน่งที่ถูกกำหนดไว้ให้สามารถลากวัถตุมาได้ เชื่อว่า Web Apps หลายตัวต้องมีการใช้งาน โดยอาจจะใช้งานผ่าน Library อย่าง jQuery Dojo หรือ Library อื่นๆ ใน HTML 5 ได้กำหนดความสามารถ Drag-and-drop ไว้ในส่วนหนึ่งของมัน โดยแค่เพิ่ม Attribute ให้กับ Element และความสามารถในส่วนของ Javascript อีกส่วนหนึ่ง เพียงแค่นี้ก็สามารถใช้ Drag-and-drop ได้ ไม่ต้องพึ่ง Library อีกต่อไป
Drag Events
ในส่วนของ Javascript ได้กำหนด Event สำหรับใช้ความสามารถของ Drag-and-drop ไว้ 7 ตัว ได้แก่
- dragstart
- dragenter
- dragover
- dragleave
- drag
- drop
- dragend
Browser Support
chrome 4.0+
IE 9+
FireFox 3.5+
Safari 6.0+
Opera 12.0+
สามารถอ่านบทความที่เกี่ยวข้องเพิ่มเติมได้ ที่ HTML5
พัฒนาโปรแกรมบนเว็บ PHP บริการพัฒนา Joomla Extension พัฒนาและปรับแต่งเว็บบอร์ด phpBB