การ Drag and Drop ด้วย MooTools

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 11945
Joined: 18/04/2012 9:39 am

การ Drag and Drop ด้วย MooTools

Post by tsukasaz »

MooTools

MooTools เป็น Javascript Framework ตัวหนึ่งที่มีความสามารถในด้านการสร้าง Animation และ Effect ต่างๆ ในหน้าเว็บไซต์ ซึ่งการทำงานบางส่วนจะคล้ายกับ jQuery แต่ในเรื่องเรียนรู้สำหรับผู้เริ่มต้น jQuery น่าจะเข้าใจง่ายกว่า ในเรื่องการเขียนคำสั่ง หรือการอ้างอิงจะเขียนคล้ายกัน เช่น การอ้างอิง DOM element จะใช้เครื่องหมาย $ เหมือนกัน

สามารถดาวน์โหลดเวอร์ชั่นล่าสุดได้ที่ http://mootools.net/download

สำหรับการสร้าง Drag and Drop ในตัวอย่างนี้ต้องใช้ตัว MooTools More ด้วยครับ
ดาวน์โหลดที่ http://mootools.net/nightly/build/mootools-more.js

มาดูตัวอย่างการสร้างคำสั่ง Drag and Drop ด้วย MooTools
โดยจะสร้าง <div> เป็นลักษณะกล่องสัก 6 กล่อง สำหรับลากไปวางที่ือื่นได้
และสร้างอีก <div> สำหรับเป็นตัวรับอีก 6 ที่
เืมื่อมีการลากกล่องมาวางในพื้นที่ Drop ให้เพิ่มขนาดพื้นที่ตัวรับออกไป

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test MooTools</title>

        <!-- เริ่ม กำหนด style ให้กับวัตถุ -->
        <style type="text/css">
            #draggables {
                height: 100px;
                position: relative;
            }
            
            #draggables DIV {
                background: #78BA91;
                cursor: move;
                height: 50px;
                left: 10px;
                position: absolute;
                top: 10px;
                width: 50px;
            }

            #droppables DIV {
                background: #6B7B95;
                float: left;
                height: 100px;
                margin: 10px;
                width: 100px;
            }
        </style>
        <!-- จบการกำหนด style -->
        
        <!-- เรียก script ของ MooTools เข้ามาใช้งาน -->
        <script type="text/javascript" src="mootools.js"></script>
        <script type="text/javascript" src="mootools-more.js"></script>
        
        <!-- เริ่มคำสั่ง สำหรับการ Drag and Drop -->
        <script type="text/javascript">
            window.addEvent('domready', function(){

                $$('#draggables DIV').makeDraggable({
                    droppables: $$('#droppables DIV'), // กำหนด Element สำหรับ Drag and Drop

                    onEnter: function(draggable, droppable){
                        // เมื่อมีการลากวัตถุเข้าไปบนพื้นที่ของตัว Drog (แต่ยังไม่วาง) ให้เปลี่ยนสีพื้นหลังของตัว Drog
                        droppable.setStyle('background', '#000000');
                    },

                    onLeave: function(draggable, droppable){
                        // เมื่อมีการลากวัตถุมา Over แล้วออกไป ให้เปลี่ยนสีพื้นหลังของตัว Drog
                        droppable.setStyle('background', '#6B7B95');
                    },

                    onDrop: function(draggable, droppable){
                        if (droppable){ // ตรวจสอบว่ามีการลากวัตถุไปวางในพื้นที่ที่กำหนดหรือไม่
                            draggable.destroy(); // ลบตัววัตถุที่มีการวางเรียบร้อยแล้วออกไป
                            droppable.morph({ // กำหนด CSS ให้กับตัว Drog
                            // เพิ่มความสูงอีก 30 จากความสูงเดิม
                            'height': droppable.getStyle('height').toInt() + 30,
                            // กำหนดสีโดยมี Effect เปลี่ยนสี 2 สี
                            'background-color' : ['#E79D35', '#6B7B95']
                            });
                        } else {
                            // ถ้าลากวัตถุไปวางนอกพื้นที่ที่กำหนด ให้เปลี่ยนสีของตัว Drag
                            draggable.setStyle('background', '#C17878');
                        }
                    }

                });

            });

        </script>
        <!-- จบคำสั่ง สำหรับการ Drag and Drop -->

    </head>
    <body>
            <!-- สร้างวัตถุสำหรับ Drag-->
            <div id="draggables">
                <div class="drag"></div>
                <div class="drag"></div>
                <div class="drag"></div>
                <div class="drag"></div>
                <div class="drag"></div>
                <div class="drag"></div>
            </div>

            <!-- สร้างวัตถุสำหรับ Drop-->
            <div id="droppables">
                <div class="drop"></div>
                <div class="drop"></div>
                <div class="drop"></div>
                <div class="drop"></div>
                <div class="drop"></div>
                <div class="drop"></div>
            </div>
    </body>
</html>
ข้อมูลเพิ่มเติม http://mootools.net/demos/?demo=Drag.Drop
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 24680
Joined: 22/09/2008 6:18 pm
Contact:

Re: การ Drag and Drop ด้วย MooTools

Post by mindphp »

นอกจาก Drag and Drop แล้ว mootools ยัง effect อีกหลายอย่าง เช่น Morph เป็นการลากแล้ว Selector จะกลับมาที่เดิม
ศึกษาเพิ่มเติม
http://mootools.net/docs/core/Fx/Fx.Morph
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 14 guests