Drag & Drop from scratch (return)
หลายคนอาจคิดว่า Drag & Drop นั้นต้องทำยากแน่ๆ แต่ความจริงแล้วการ coding ไม่ยากเลย แต่ความยากมันอยู่ที่การนำไปใช้ บทความนี้จะบอกว่าทำอย่างไร ส่วนจะเอาไปใช้อย่างไรนั้น ต้องลองนำไปต่อยอดดูนะคับ ว่าแล้วก็มาจับกบกันเต๊อะ
Obbs & Basket
เริ่มแรกเราต้องสร้างเพจที่มีกบและตะกร้าก่อนนะคับ โดยสร้างไฟล์ html ไฟล์ obb.html ซึ่งจะทำหน้าที่เป็นหน้าเว็ปเพจของเรานะคับ และสร้าง style sheet ไฟล์ ชื่อ obb.css จากนั้นผูกทั้งสองไฟล์เข้าด้วยกัน เป็นอันเสร็จพิธี
<html> <head> <link media="screen" type="text/css" href="obb.css" rel="stylesheet"> </head> <body> <div class="obb" id="1"></div> <div class="obb" id="2"></div> <div class="basket"></div> </body> </html>
จะเห็นว่าเพจของเราจะมี กบ 2 ตัว และตะกร้า 1 ใบ
<div> คือ division ปกติเราจะใช้เพื่อเป็นตัวแทนของ section ที่เราสร้างขึ้นเอง เช่นในกรณีนี้ เราอยากทำกบ เราก็จะสร้าง <div> ซึ่งมี คลาสเป็น obb ส่วน id จะใช้ในการระบุว่าเป็นกบตัวใหน ซึ่งเดี๋ยวเราจะเขียน css ขึ้นมากำหนดว่า div ที่มีคลาสเป็น obb ให้แสดงเป็นรูปกบนะ นั่นเอง
ปกติเวลาเราเขียน css มันจะแบ่งได้เป็น 2 ส่วนคือ
- style สำหรับ standard html tag เช่น <p> เป็นต้น
- style สำหรับ custom tag ซึ่งเราจะใช้ <div> และ <span>
ดังนั้นตัวอย่างนี้ผมก็เลยใช้ <div> ครับ ความแตกต่างของ <div> และ <span> คือ <div> จะมีลักษณะเป็น “Block Element” คือมันจะไม่เรียงต่อๆ กัน จะอยู่กันคนละบรรทัด ส่วน <span> นั้นเป็น “Inline Element” ถ้ามีหลายๆ อันมันก็จะเรียงต่อๆ กันไปจนสุด แล้วมันก็จะขึ้นบรรทัดใหม่ครับ
ต่อด้วย obb.css นะคับ
div.obb{
background-image: url(obb.gif);
width: 40px;
height: 30px;
float: left;
margin-right: 10px;
}
div.basket{
background-image: url(basket.gif);
width: 50px;
height: 35px;
float: right;
margin-right: 300px;
}
Let’s move
เราจะใช้ JQuery + JQuery UI ซึ่งเป็น Java library ซึ่งจะทำให้เราเขียน Java scripts ไ้ด้ง่ายขึ้น
พอโหลด JQuery และ JQuery UI เสร็จแล้ว เอาไฟล์ไปไว้ใน folder ที่ต้องการ แล้วก็แก้ไข obb.html ดังนี้คับ
<html>
<head>
<link media="screen" type="text/css" href="obb.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.obb').draggable({revert: true});
});
</script>
</head>
<body>
<div class="obb" id="1"></div>
<div class="obb" id="2"></div>
<div class="basket"></div>
</body>
</html>
บรรทัดที่ 5: ขอใช้ jQuery library
บรรทัดที่ 6: ขอใช้ JQuery UI library
บรรทัดที่ 9-11: เป็นการบอก ถ้าเพจนี้โหลดเสร็จ ให้ทำคำสั่งนี้นะ ซึ่งก็คือ บรรทัดที่ 11 นั่นเอง
บรรทัดที่ 10: $(‘div.obb’) คือ select ซึ่งหมายถึง element div ที่มี class=”obb” นั่นเอง รายละเอียด
Catch them!
ขั้นนี้เราจะกำหนดจุดปล่อยกบ ซึ่งก็คือตะกร้า เพิ่มโค้ดเข้าไปใน obb.html
<html>
<head>
<link media="screen" type="text/css" href="obb.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.obb').draggable({revert: true});
$('div.basket').droppable({
accept: 'div.obb',
drop: function(ev,ui){
ui.draggable.fadeOut();
}
});
});
</script>
</head>
<body>
<div class="obb" id="1"></div>
<div class="obb" id="2"></div>
<div class="basket"></div>
</body>
</html>
- บรรทัดที่ 11: บอกว่า <div class=”basket”> เป็น drop zone
- บรรทัดที่ 12: รับเฉพาะ <div class=”obb”>
- บรรทัดที่ 13-14: เมื่อกบถูก drop ให้ทำตามนี้นะ
Conclusion
จะเห็นว่าไม่ยากเลย แต่ก็ยังเอาไปใช้จริงไม่ได้ ความยากมันอยู่ที่ว่าจะเอาไปใช้ยังไงให้เหมาะสม เพราะบางทีการใส่ลูกเล่นให้เว็บอย่างไม่เหมาะสมมันก็เป็นผลเสียได้
-
http://mindmidday.wordpress.com/ mindmidday
-
zeally
-
zar
-
admin
-
yoyokung
-
admin
-
yoyokung
-
admin
-
yoyokung
-
admin
-
GillBate
-
admin
-
GillBate
-
admin
-
http://www.yo.in.th yoyokung
-
http://wegrass.com Nutrawee
