HTML5 Drag and Drop
HTML5 Drag and Drop
HTML5 Drag and Drop
ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

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