วิธีทำลากและวางไอเทม Drag & Drop Image หรือ Div ด้วย jQuery UI
วิธีทำลากและวางไอเทม Drag & Drop Image หรือ Div ด้วย jQuery UI
การทำระบบ ลาก และ วางไอเทม ( Drag & Drop ) สามารถทำไปประยุกต์ใช้ในการพัฒนาเว็บไซต์ได้หลายส่วน ตัวอย่างเช่น นำไปใช้กับระบบจัดเรียง หรือ จัดลำดับ ( arrange ) ของตารางข้อมูลในส่วนของ backend การใช้ระบบลากวางแทนการกดปุ่มเครื่องหมาย เลื่อนขึ้น-ลง หรือเลื่อนซ้าย-ขวา จะสะดวกสำหรับผู้ใช้งานมากกว่า เพราะสามารถจัดลำดับได้หลายขั้นมากกว่า ไม่ต้องคลิกหลายครั้ง
ใน jQuery UI จะมีฟังก์ชั่นชื่อว่า sortable ที่ทำให้เราสามารถใช้งานระบบ ลาก-วาง ได้อย่างสะดวกสบาย วิธีการใช้งานก็ง่ายมาก ๆ เพียงกำหนดให้ class หรือ id ครอบไอเทมทั้งหมด และยังมี event ต่าง ๆ ให้ใช้งานอีกด้วย
วิธีใช้งาน sortable ใน jQuery UI
- 1. ทำการเรียกใช้งาน jQuery และ jQuery UI ดังนี้
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>
$('#sortable').sortable();
$('#sortable').sortable({ start: function(event, ui) { var start_pos = ui.item.index(); ui.item.data('start_pos', start_pos); }, change: function(event, ui) { var start_pos = ui.item.data('start_pos'); var index = ui.placeholder.index(); }, update: function(event, ui) { var start_pos = ui.item.data('start_pos'); var index = ui.placeholder.index(); } });