Below, I'm showing you a simple layout, but yours can be as complex as you want it to be.
Specify Slots and Items
-
To specify a slot, give its element
data-swapy-slot="anyUniqueNameYouWant". Each slot can only contain a single item. Items are what you drag and drop. -
To mark an element as an item, add this data attribute:
data-swapy-item="anyUniqueNameYouWant".
By default, items are draggable from any spot. You can specify a
handle by adding an element with data-swapy-handle (see
content-b below).
You can customize the slot you are currently selecting by
styling [data-swapy-highlighted] in your CSS.
<div class="container">
<div class="section-1" data-swapy-slot="foo">
<div class="content-a" data-swapy-item="a">
<!-- Your content for content-a goes here -->
</div>
</div>
<div class="section-2" data-swapy-slot="bar">
<div class="content-b" data-swapy-item="b">
<!-- Your content for content-b goes here -->
<div class="handle" data-swapy-handle></div>
</div>
</div>
<div class="section-3" data-swapy-slot="baz">
<div class="content-c" data-swapy-item="c">
<!-- Your content for content-c goes here -->
</div>
</div>
</div>Use Swapy
Get the container element that contains your slots and items,
and pass it to createSwapy(). By default, it will
use `dynamic` animation. You can change it using the animation
config option.
import { createSwapy } from 'swapy'
const container = document.querySelector('.container')
const swapy = createSwapy(container, {
animation: 'dynamic' // or spring or none
})
// You can disable and enable it anytime you want
swapy.enable(true)