วิธีการทำ Drag to Swap หรือ การลากและวางใน React และ Next.js ด้วย Swapy

06 Mar 2025 04:002 months ago

เมื่อการออกแบบ UI กลายเป็นเรื่องง่ายด้วย Drag to Swap

เคยรู้สึกไหมว่าการจัดเรียงข้อมูลหรือองค์ประกอบบนเว็บไซต์และแอปพลิเคชันเป็นเรื่องยุ่งยาก? วันนี้เราจะมาพาคุณสำรวจเทคนิคสุดล้ำที่จะเปลี่ยนวิธีคิดในการออกแบบอินเตอร์เฟซของคุณ - นั่นก็คือ "Drag to Swap"

เทคนิคนี้ไม่เพียงแต่ทำให้การใช้งานง่ายขึ้น แต่ยังเพิ่มประสบการณ์ผู้ใช้งาน ช่วยเพิ่ม interaction มากขึ้น ด้วยวันนี้เราจะมาแนะนำ dependency ตัวหนึ่งนั้นก็คือ Swapy สามารถใช้ได้ทั้ง

React
Vue
Svelte

โดยในวันนี้จะมาแสดงวิธีการง่ายๆ สำหรับการทำ Drag to Swap บน React (Next.js) กันครับ

อ่านเพิ่มเติมได้ที่ https://swapy.tahazsh.com/docs/installation/

ขั้นตอนที่ 1: Install Swapy เข้า Project ของเรา

ขั้นตอนที่ 2: Import Dependencies ในไฟล์ที่เราต้องการใช้งาน

ขั้นตอนที่ 3: ประกาศตัวแปร useRef สำหรับ container และ ตัวเก็บค่า state

ขั้นตอนที่ 4: สร้าง swapy instance ใน useEffect

ขั้นตอนที่ 5: return div container, slot และ item ด้วย slot คือ data-swapy-slot และ item คือ data-swapy-item

code เต็ม

และยังมีอีกวิธีสำหรับคนที่ต้องการความ dynamic ให้เนื้อหาภายในมีการ update ตลอดเวลา

ขั้นตอนที่ 1: Install Swapy เข้า Project ของเรา

ขั้นตอนที่ 2: Import Dependencies ในไฟล์ที่เราต้องการใช้งาน

ขั้นตอนที่ 3: ประกาศตัวแปร useRef สำหรับ container และ ตัวเก็บค่า state

ขั้นตอนที่ 4: สร้าง swapy instance ใน useEffect

ขั้นตอนที่ 5: return div container, slot และ item ด้วย slot คือ data-swapy-slot และ item คือ data-swapy-item

code เต็ม

Teekayu Poongkawabutr(Creaml4tt3)

Developer ท่านหนึ่งที่ทำงานบ้าง ไม่ทำงานบ้าง ทำงานเป็น dev แต่จบ graphic ชีวิตสับสน website: creaml4tt3.me

import { useEffect, useRef } from "react";

import { createSwapy } from "swapy";

import type {

Swapy,

BeforeSwapEvent,

SwapStartEvent,

SwapEvent,

SwapEndEvent,

} from "swapy";

const App: React.FC = () => {

const swapy = useRef<Swapy | null>(null); // สำหรับการเก็บ swapy instance

const container = useRef<HTMLDivElement | null>(null); // สำหรับการเก็บ container ของ swapy

useEffect(() => {

// เช็คก่อนว่า container โหลดแล้ว

if (container.current) {

swapy.current = createSwapy(container.current, {}); // สามารถใส่ options เพิ่มเติมได้เช็คได้ที่ docs

// event ของ swapy ก่อนจะลาก จำเป็นต้อง return boolean false คือลากไม่ได้ true คือลากได้

swapy.current.onBeforeSwap((event: BeforeSwapEvent): boolean => {

console.log("swap onBeforeSwap", event);

return true;

});

// event ของ swapy เมื่อเริ่มลาก

swapy.current.onSwapStart((event: SwapStartEvent): void => {

console.log("swap onSwapStart", event);

});

// event ของ swapy ขณะลาก

swapy.current.onSwap((event: SwapEvent): void => {

console.log("swap onSwap", event);

});

// event ของ swapy เมื่อลากเสร็จ

swapy.current.onSwapEnd((event: SwapEndEvent): void => {

console.log("swap onSwapEnd", event);

});

}

return () => {

// เคลียร์ swapy

swapy.current?.destroy();

};

}, []);

return (

{/* slot a */}

{/* item a */}

</div>

{/* slot b */}

{/* item a */}

</div>

);

};

export default App;

import { useEffect, useRef, useState, useMemo } from "react";

import { createSwapy, utils } from "swapy";

import type { Swapy, SlotItemMapArray, SwapEvent } from "swapy";

type Item = {

id: string; // สำหรับเก็บ id ของ item และเป็น key ใน slotItemMap

title: string; // สำหรับเก็บชื่อ item

};

const initialItems: Item[] = [

{ id: "1", title: "1" },

{ id: "2", title: "2" },

{ id: "3", title: "3" },

];

let id = 4;

const AppDynamic: React.FC = () => {

const swapy = useRef<Swapy | null>(null); // สำหรับการเก็บ swapy instance

const container = useRef<HTMLDivElement | null>(null); // สำหรับการเก็บ container ของ swapy

const [items, setItems] = useState<Item[]>(initialItems); // สำหรับเก็บ items ที่จะใช้ใน swapy

const [slotItemMap, setSlotItemMap] = useState<SlotItemMapArray>(

utils.initSlotItemMap(items, "id"), // "id" ต้องเป็น string เท่านั่นเป็นตัวเลขไม่ได้ (v.1.0.5)

);

const slottedItems = useMemo(

() => utils.toSlottedItems(items, "id", slotItemMap), // "id" ต้องเป็น string เท่านั่นเป็นตัวเลขไม่ได้ (v.1.0.5)

[items, slotItemMap],

);

// ทุกครั้งที่ items เปลี่ยนแปลงจะทำการเรียกใช้งาน dynamicSwapy เพื่อให้ swapy ทำการเรียงลำดับ item ใหม่

useEffect(

() =>

utils.dynamicSwapy(

swapy.current,

items,

"id", // "id" ต้องเป็น string เท่านั่นเป็นตัวเลขไม่ได้ (v.1.0.5)

slotItemMap,

setSlotItemMap,

[items],

);

useEffect(() => {

// เช็คก่อนว่า container โหลดแล้ว

if (container.current) {

swapy.current = createSwapy(container.current, {}); // สามารถใส่ options เพิ่มเติมได้เช็คได้ที่ docs

// event ของ swapy ขณะลาก ให้ทำการเปลี่ยน slotItemMap ตามที่ลาก

swapy.current.onSwap((event: SwapEvent): void => {

setSlotItemMap(event.newSlotItemMap.asArray);

});

return () => {

// เคลียร์ swapy

swapy.current?.destroy();

};

}

}, []);

return (

{/* แสดง items ที่สามารถลาก */}

{slottedItems.map(({ slotId, itemId, item }, index) => (

{item && (

<span>{index + 1}</span>

<span>{item.title}</span>

{/* ปุ่มลบ item */}

<span

className="delete"

data-swapy-no-drag

onClick={() => {

setItems(items.filter((i) => i.id !== item.id));

}}

></span>

</div>

)}

</div>

))}

</div>

{/* ปุ่มเพิ่ม item */}

<div

className="item item--add"

onClick={() => {

const newItem: Item = { id: `${id}`, title: `${id}` };

setItems([...items, newItem]);

id++;

}}

</div>

);

};

export default AppDynamic;