วิธีการสร้างลูกเล่นหรือทำเอฟเฟกต์การเคลื่อนไหวสิ่งต่างๆ ที่อยู่บนหน้าเว็บไซต์นั้น โดยทั่วไปแล้วจะนิยมใช้ภาษา JavaScript ซึ่งเป็นภาษาที่ทำให้เราสามารถควบคุมสิ่งต่างๆ ที่แสดงผลอยู่ได้แบบทันทีและรวดเร็ว นอกจากเรื่องความสวยงามทันสมัยและทำให้เว็บไซต์ดูน่าสนใจแล้ว เรายังสามารถนำ JavaScript มาประยุกต์ใช้กับการทำระบบได้ด้วย หนึ่งในเทคนิคที่นิยมนำมาประยุกต์ใช้ก็ คือ การลากวางวัตถุ หรือ block บนเว็บไซต์ ในบทความนี้จะแนะนำการใช้งาน JavaScript library สำหรับลากวาง ที่ชื่อว่า interact.js
เริ่มต้นเราต้องดาวน์โหลดตัว interact.js สำหรับใช้ในไฟล์ของเราก่อน วิธีการแนะนำ เป็น 2 วิธี คือ
วิธีแรก ดาวน์โหลดโดยใช้คำสั่งใน command
โค้ด: เลือกทั้งหมด
$ npm install interactjs@nextโค้ด: เลือกทั้งหมด
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>interact.js</title>
<style>
/* กำหนด css รูปแบบการแสดงผลของ block */
.draggable {
width: 25%;
min-height: 6.5em;
margin: 5%;
background-color: #29e;
color: white;
border-radius: 0.75em;
padding: 4%;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
</style>
</head>
<body>
<!--สร้าง block ที่ 1 สำหรับลากวาง-->
<div class="draggable">
<p>Block 1</p>
</div>
<!--สร้าง block ที่ 2 สำหรับลากวาง-->
<div class="draggable">
<p>Block2</p>
</div>
<!--เรียกใช้ cdn ของ interact.js-->
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script type="text/javascript">
// กำหนด class ที่ชื่อ draggable ให้สามารถลากวางได้
interact('.draggable').draggable({
// กำหนดให้ scroll bar ขยายตามการลากวาง
autoScroll: true,
// ส่วนนี้จะเป็นการกำหนดตำแหน่งของ block หลังจากลากวางแล้ว
onmove: function (event) {
var target = event.target;
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
});
</script>
</body>
</html>
ตัวอย่างที่ 2
การกำหนดจุดเริ่มต้นของ block เราจะใช้การแทรก css แบบ inline เข้าไปได้เลย ใช้คำสั่ง transform ในการกำหนดตำแหน่งของ block เป็น x, y
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>interact.js</title>
<style>
/* กำหนด css รูปแบบการแสดงผลของ block */
.draggable {
width: 5%;
background-color: #29e;
color: white;
border-radius: 0.75em;
padding: 4%;
position: absolute;
}
</style>
</head>
<body>
<!--สร้าง block ที่ 1 สำหรับลากวาง-->
<div class="draggable" style="transform: translate(100px, 0px);" data-x="100" data-y="0">
<p>Block 1</p>
</div>
<!--สร้าง block ที่ 2 สำหรับลากวาง-->
<div class="draggable" style="transform: translate(400px, 0px);" data-x="400" data-y="0">
<p>Block 2</p>
</div>
<!--สร้าง block ที่ 3 สำหรับลากวาง-->
<div class="draggable" style="transform: translate(100px, 200px);" data-x="100" data-y="200">
<p>Block 3</p>
</div>
<!--สร้าง block ที่ 4 สำหรับลากวาง-->
<div class="draggable" style="transform: translate(400px, 200px);" data-x="400" data-y="200">
<p>Block 4</p>
</div>
<!--สร้าง block ที่ 5 สำหรับลากวาง-->
<div class="draggable" style="transform: translate(700px, 200px);" data-x="700" data-y="200">
<p>Block 5</p>
</div>
<!--เรียกใช้ cdn ของ interact.js-->
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script type="text/javascript">
// กำหนด class ที่ชื่อ draggable ให้สามารถลากวางได้
interact('.draggable').draggable({
// กำหนดให้ scroll bar ขยายตามการลากวาง
autoScroll: true,
// ส่วนนี้จะเป็นการกำหนดตำแหน่งของ block หลังจากลากวางแล้ว
onmove: function (event) {
var target = event.target;
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
});
</script>
</body>
</html>
นอกจากนี้ยังมีความสามารถอื่นๆ ของตัว interact.js เช่น การกำหนดพื้นที่ที่สามารถลากไปวางได้ ปรับขนาดของวัตถุ การทำSnapping ของวัตถุ ดูเพิ่มเติมได้จากเว็บไซต์หลัก https://interactjs.io