วิธีทำลากและวางไอเทม Drag & Drop Image หรือ Div ด้วย jQuery UI

<h2>วิธีทำลากและวางไอเทม Drag &&num;038&semi; Drop Image หรือ Div ด้วย jQuery UI<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>วิธีทำลากและวางไอเทม Drag &&num;038&semi; Drop Image หรือ Div ด้วย jQuery UI<&sol;strong><&sol;p>&NewLine;<p>การทำระบบ ลาก และ วางไอเทม &lpar; Drag &&num;038&semi; Drop &rpar; สามารถทำไปประยุกต์ใช้ในการพัฒนาเว็บไซต์ได้หลายส่วน ตัวอย่างเช่น นำไปใช้กับระบบจัดเรียง หรือ จัดลำดับ &lpar; arrange &rpar; ของตารางข้อมูลในส่วนของ backend การใช้ระบบลากวางแทนการกดปุ่มเครื่องหมาย เลื่อนขึ้น-ลง หรือเลื่อนซ้าย-ขวา จะสะดวกสำหรับผู้ใช้งานมากกว่า เพราะสามารถจัดลำดับได้หลายขั้นมากกว่า ไม่ต้องคลิกหลายครั้ง<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;jquery&lowbar;sortable&sol;" target&equals;"&lowbar;blank">ตัวอย่างการทำงาน ลากและวางไอเทม ด้วย jquery UI sortable <&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><br &sol;>&NewLine;ใน jQuery UI จะมีฟังก์ชั่นชื่อว่า sortable ที่ทำให้เราสามารถใช้งานระบบ ลาก-วาง ได้อย่างสะดวกสบาย วิธีการใช้งานก็ง่ายมาก ๆ เพียงกำหนดให้ class หรือ id ครอบไอเทมทั้งหมด และยังมี event ต่าง ๆ ให้ใช้งานอีกด้วย<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีใช้งาน sortable ใน jQuery UI<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; ทำการเรียกใช้งาน jQuery และ jQuery UI ดังนี้<&sol;li>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script src&equals;"https&colon;&sol;&sol;code&period;jquery&period;com&sol;jquery-1&period;12&period;4&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi; &NewLine;&lt&semi;script src&equals;"https&colon;&sol;&sol;code&period;jquery&period;com&sol;ui&sol;1&period;12&period;1&sol;jquery-ui&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<li>2&period; สร้าง class หรือ id ครอบไอเทมทั้งหมดที่ต้องการให้สามารถ drag และ drop ได้ แนะนำว่าให้สร้างในแท็ก ul li แต่จะเป็น div ก็สามารถใช้งานได้เหมือนกันครับ ตัวอย่างเช่น<&sol;li>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;ul id&equals;"sortable"&gt&semi; &NewLine; &lt&semi;li&gt&semi;Item 1&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;Item 2&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;Item 3&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;Item 4&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;Item 5&lt&semi;&sol;li&gt&semi; &NewLine;&lt&semi;&sol;ul&gt&semi;<&sol;pre>&NewLine;<li>3&period; เรียกใช้คำสั่ง sortable ของ jQuery UI ง่าย ๆ แบบนี้ ไอเทมทั้งหมดที่เป็น li ก็จะสามารถลากและวางในตำแหน่งใด ๆ ก็ได้ภายในไอดี sortable<&sol;li>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;'&num;sortable'&rpar;&period;sortable&lpar;&rpar;&semi;<&sol;pre>&NewLine;<li>4&period; เราสามารถใช้งาน event ต่าง ๆ ของ jQuery UI sortable เพื่อส่งตำแหน่งลำดับไปอัพเดทในฐานข้อมูลได้ดังนี้ครับ<&sol;li>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;'&num;sortable'&rpar;&period;sortable&lpar;&lbrace; &NewLine; start&colon; function&lpar;event&comma; ui&rpar; &lbrace; &NewLine; var start&lowbar;pos &equals; ui&period;item&period;index&lpar;&rpar;&semi; &NewLine; ui&period;item&period;data&lpar;'start&lowbar;pos'&comma; start&lowbar;pos&rpar;&semi; &NewLine; &rcub;&comma; &NewLine; change&colon; function&lpar;event&comma; ui&rpar; &lbrace; &NewLine; var start&lowbar;pos &equals; ui&period;item&period;data&lpar;'start&lowbar;pos'&rpar;&semi; &NewLine; var index &equals; ui&period;placeholder&period;index&lpar;&rpar;&semi; &NewLine; &rcub;&comma; &NewLine; update&colon; function&lpar;event&comma; ui&rpar; &lbrace; &NewLine;&Tab;&Tab;&Tab;var start&lowbar;pos &equals; ui&period;item&period;data&lpar;'start&lowbar;pos'&rpar;&semi; &NewLine; var index &equals; ui&period;placeholder&period;index&lpar;&rpar;&semi; &NewLine; &rcub; &NewLine; &rcub;&rpar;&semi;<&sol;pre>&NewLine;<&sol;ul>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;jquery&lowbar;sortable&sol;" target&equals;"&lowbar;blank">ตัวอย่างการทำงาน ลากและวางไอเทม ด้วย jquery UI sortable <&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;