Drag & Drop from scratch (return)

หลายคนอาจคิดว่า Drag & Drop นั้นต้องทำยากแน่ๆ แต่ความจริงแล้วการ coding ไม่ยากเลย แต่ความยากมันอยู่ที่การนำไปใช้ บทความนี้จะบอกว่าทำอย่างไร ส่วนจะเอาไปใช้อย่างไรนั้น ต้องลองนำไปต่อยอดดูนะคับ ว่าแล้วก็มาจับกบกันเต๊อะ

Obbs & Basket

เริ่มแรกเราต้องสร้างเพจที่มีกบและตะกร้าก่อนนะคับ โดยสร้างไฟล์ html ไฟล์ obb.html ซึ่งจะทำหน้าที่เป็นหน้าเว็ปเพจของเรานะคับ และสร้าง style sheet ไฟล์ ชื่อ obb.css จากนั้นผูกทั้งสองไฟล์เข้าด้วยกัน เป็นอันเสร็จพิธี

// obb.html นะคับ
<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> ต่างกันยังไง ลอง search ดูคับ

ต่อด้วย obb.css นะคับ

/* 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 ดังนี้คับ

// 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>

บรรทัดที่ 6: ขอใช้ jQuery library
บรรทัดที่ 7: ขอใช้ JQuery UI library
บรรทัดที่ 9-13: เป็นการบอก ถ้าเพจนี้โหลดเสร็จ ให้ทำคำสั่งนี้นะ ซึ่งก็คือ บรรทัดที่ 11 นั่นเอง
บรรทัดที่ 11: $(‘div.obb’) คือ select ซึ่งหมายถึง element div ที่มี class=”obb” นั่นเอง รายละเอียด

Catch them!

ขั้นนี้เราจะกำหนดจุดปล่อยกบ ซึ่งก็คือตะกร้า เพิ่มโค้ดเข้าไปใน obb.html

// 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.drop.fadeOut();
                                             }
                                    });
        });
    </script>

  </head>

  <body>
    <div class="obb" id="1"></div>
    <div class="obb" id="2"></div>
    <div class="basket"></div>
  </body>

</html>

บรรทัดที่ 12: บอกว่า <div class=”basket”> เป็น drop zone
บรรทัดที่ 13: รับเฉพาะ <div class=”obb”>
บรรทัดที่ 14-16: เมื่อกบถูก drop ให้ทำตามนี้นะ

Conclusion

จะเห็นว่าไม่ยากเลย แต่ก็ยังเอาไปใช้จริงไม่ได้ ความยากมันอยู่ที่ว่าจะเอาไปใช้ยังไงให้เหมาะสม เพราะบางทีการใส่ลูกเล่นให้เว็ปอย่างไม่เหมาะสมมันก็เป็นผลเสียได้

Share and Enjoy:

Tags: css, drag & drop, jquery, ความรู้

This entry was posted on Wednesday, February 17th, 2010 at 3:40 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.