การสร้าง block ลากวางด้วย interact.js


Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

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

การสร้าง block ลากวางด้วย interact.js

Post by tsukasaz » 31/10/2019 1:22 pm

การสร้าง block ลากวางด้วย interact.js

วิธีการสร้างลูกเล่นหรือทำเอฟเฟกต์การเคลื่อนไหวสิ่งต่างๆ ที่อยู่บนหน้าเว็บไซต์นั้น โดยทั่วไปแล้วจะนิยมใช้ภาษา JavaScript ซึ่งเป็นภาษาที่ทำให้เราสามารถควบคุมสิ่งต่างๆ ที่แสดงผลอยู่ได้แบบทันทีและรวดเร็ว นอกจากเรื่องความสวยงามทันสมัยและทำให้เว็บไซต์ดูน่าสนใจแล้ว เรายังสามารถนำ JavaScript มาประยุกต์ใช้กับการทำระบบได้ด้วย หนึ่งในเทคนิคที่นิยมนำมาประยุกต์ใช้ก็ คือ การลากวางวัตถุ หรือ block บนเว็บไซต์ ในบทความนี้จะแนะนำการใช้งาน JavaScript library สำหรับลากวาง ที่ชื่อว่า interact.js

เริ่มต้นเราต้องดาวน์โหลดตัว interact.js สำหรับใช้ในไฟล์ของเราก่อน วิธีการแนะนำ เป็น 2 วิธี คือ
วิธีแรก ดาวน์โหลดโดยใช้คำสั่งใน command

Code: Select all

$ npm install interactjs@next
หรือ วิธีที่สอง ใช้ CDN แทรกโค้ดลงในไฟล์ของเราได้เลย

Code: Select all

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
สร้างไฟล์สำหรับลากวางแบบง่ายๆ โดยในโค้ดตัวอย่างจะสร้าง block สำหรับลากวางมา 2 block มีการกำหนดรูปแบบขนาดของ block ด้วย CSS

Code: Select all

<!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>
การแสดงผล
Image


ตัวอย่างที่ 2
การกำหนดจุดเริ่มต้นของ block เราจะใช้การแทรก css แบบ inline เข้าไปได้เลย ใช้คำสั่ง transform ในการกำหนดตำแหน่งของ block เป็น x, y

Code: Select all

<!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>
การแสดงผล
Image

นอกจากนี้ยังมีความสามารถอื่นๆ ของตัว interact.js เช่น การกำหนดพื้นที่ที่สามารถลากไปวางได้ ปรับขนาดของวัตถุ การทำSnapping ของวัตถุ ดูเพิ่มเติมได้จากเว็บไซต์หลัก https://interactjs.io
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests