โดยเหมือนเดิมครับเราจะเริ่มต้นจากการเขียนประกาศที่หัวก่อนนะครับว่าเราจะใช้งาน ตัวของ jquery UI ในการเขียนในไฟร์นี้ด้วยโค้ดดังนี้
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="static/jquery-ui.js" type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div class="drag" style="background-color: rgb(84, 152, 216); width:100px; height:100px"></div>
<div class="drop" style="background-color: red; width:200px; height:200px"></div>
</body>
</html>- กล่องสีเหลี่ยมสีฟ้าและสีแดง
- กล่องสีเหลี่ยมสีฟ้าและสีแดง.png (1.47 KiB) Viewed 1308 times
โค้ด: เลือกทั้งหมด
$(".drag").draggable();
$( ".drop" ).droppable();- ขยับสีเหลี่ยมสีฟ้า
- ขยับสีเหลี่ยมสีฟ้า.gif (49.91 KiB) Viewed 1308 times
โค้ด: เลือกทั้งหมด
$(".drag").draggable();
$( ".drop" ).droppable(
{
drop: function(event, ui) {
$(this).css('background', 'rgb(0,200,0)');
},
over: function(event, ui){
$(this).css('background', 'rgb(0,200,200)');
},
out: function(event, ui){
$(this).css('background', 'red');
}
});- ผลลัพธ์ของการใช้ drag and drop
- ผลลัพธ์ของการใช้ drag and drop.gif (38.83 KiB) Viewed 1308 times
ซึ่งการใช้งาน drag and drop นั้นเราสามารถใช้ประโยชน์ได้มากมายเลยครับมันจะเป็นอีกหนึ่งฟีเจอร์ที่จะใช้งานได้บนเว็บไซต์ของเราได้แล้วมีประโยชน์มากๆแน่นอนครับถ้าหากว่าเราได้ทำการเรียนรู้เอาไว้เพราะว่าฟีเจอร์บางอย่างที่เราต้องการใช้นั้นมันไม่เหมาะสมกับการทำเป็นเพียงแค่ปุ่มกดเช่นเราอยากจะทำเกมปริศนาภาพ เราก็ไม่ได้คงจะไม่ใช้ระบบที่ใช้สำหรับการกดปุ่มในการเอาภาพนั้นไปไว้ให้ถูกดที่ใช่ไหมล่ะครับ นั้นก็เป็นอีก 1 ไอเดียครับที่เราจะเอาคำสั่งหรือระบบนี้มาใช้งานในเว็บไซต์ของเราได้
อ้างอิง
https://www.geeksforgeeks.org/jquery-ui-draggable-and-droppable-methods/
https://jqueryui.com/droppable/
https://www.mindphp.com/en/online-tutorials/joomla-extension-dev-eng-2/3008-chapter-12-jquery-drag-and-drop.html