4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Ted9,'use client'; import { useEffect, useRef } from 'react'; import { type Swapy, createSwapy } from 'swapy'; const slots = [ { slot: 'a', content: 'A', bg: 'bg-emerald-500', hasHandle: false }, { slot: 'b', content: 'B', bg: 'bg-rose-500', hasHandle: true }, { slot: 'c', content: 'C', bg: 'bg-blue-500', hasHandle: false }, { slot: 'd', content: 'D', bg: 'bg-purple-500', hasHandle: false }, { slot: 'e', content: 'E', bg: 'bg-pink-500', hasHandle: false }, { slot: 'f', content: 'F', bg: 'bg-yellow-400', hasHandle: true }, { slot: 'g', content: 'G', bg: 'bg-green-500', hasHandle: true }, { slot: 'h', content: 'H', bg: 'bg-orange-500', hasHandle: false }, { slot: 'i', content: 'I', bg: 'bg-cyan-500', hasHandle: false }, ]; function SwapyWithoutComponents() { const swapyRef = useRef(null); const containerRef = useRef(null); useEffect(() => { if (containerRef.current) { swapyRef.current = createSwapy(containerRef.current, { // animation: 'dynamic' // swapMode: 'drop', // autoScrollOnDrag: true, // enabled: true, // dragAxis: 'x', // dragOnHold: true }); // swapyRef.current.enable(false) // swapyRef.current.destroy() // console.log(swapyRef.current.slotItemMap()) swapyRef.current.onBeforeSwap((event) => { console.log('beforeSwap', event); // This is for dynamically enabling and disabling swapping. // Return true to allow swapping, and return false to prevent swapping. return true; }); swapyRef.current.onSwapStart((event) => { console.log('start', event); }); swapyRef.current.onSwap((event) => { console.log('swap', event); }); swapyRef.current.onSwapEnd((event) => { console.log('end', event); }); } return () => { swapyRef.current?.destroy(); }; }, []); return (

{slots.map(({ slot, content, bg, hasHandle }) => (

{content && (

{hasHandle && (

)}

{content}

)}

))}

); } export default SwapyWithoutComponents; 53:Td71,'use client'; import { cn } from '@/lib/utils'; import type React from 'react'; import { useEffect, useRef } from 'react'; import { type SlotItemMapArray, createSwapy } from 'swapy'; type AnimationType = 'dynamic' | 'spring' | 'none'; type SwapMode = 'hover' | 'drop'; type Config = { animation: AnimationType; continuousMode: boolean; manualSwap: boolean; swapMode: SwapMode; autoScrollOnDrag: boolean; }; type SwapyLayoutProps = { id: string; enable?: boolean; onSwap?: (event: { newSlotItemMap: { asArray: SlotItemMapArray } }) => void; config?: Partial; className?: string; children: React.ReactNode; }; export const SwapyLayout = ({ id, onSwap, config = {}, className, children }: SwapyLayoutProps) => { const containerRef = useRef(null); const swapyRef = useRef | null>(null); useEffect(() => { const container = containerRef.current; if (!container) return; swapyRef.current = createSwapy(container, config); if (onSwap) { swapyRef.current.onSwap(onSwap); } return () => { swapyRef.current?.destroy(); }; }, [config, onSwap]); return (

{children}

); }; export const DragHandle = ({ className }: { className?: string }) => { return (

); }; export const SwapySlot = ({ id, className, children, }: { id: string; className?: string; children: React.ReactNode; }) => { return (

{children}

); }; const dragOpacityClassMap: Record = { 10: 'data-swapy-dragging:opacity-10', 20: 'data-swapy-dragging:opacity-20', 30: 'data-swapy-dragging:opacity-30', 40: 'data-swapy-dragging:opacity-40', 50: 'data-swapy-dragging:opacity-50', 60: 'data-swapy-dragging:opacity-60', 70: 'data-swapy-dragging:opacity-70', 80: 'data-swapy-dragging:opacity-80', 90: 'data-swapy-dragging:opacity-90', 100: 'data-swapy-dragging:opacity-100', }; export const SwapyItem = ({ id, className, children, dragItemOpacity = 100, // default to 100 }: { id: string; className?: string; children: React.ReactNode; dragItemOpacity?: number; }) => { const opacityClass = dragOpacityClassMap[dragItemOpacity] ?? 'data-swapy-dragging:opacity-50'; return (

{children}

); }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","swapy",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/swapy","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"swapy"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://ui-layouts.com/r/swapy-without-components.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/swapy-without-components","itemId":"@ui-layouts/swapy-without-components"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"./registry/components/swapy/swapy-without-components.tsx","content":"$52","type":"registry:component"},{"path":"./components/ui/swapy.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Swapy Without Components

Installation

Files

components

Styles