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 ให้เพิ่มขนาดพื้นที่ตัวรับออกไป
โค้ด: เลือกทั้งหมด
<!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>
