Skip to content

Instantly share code, notes, and snippets.

@bryanmaina

bryanmaina/index.html

Created August 30, 2024 12:04
Show Gist options
  • Save bryanmaina/f168f46b81cf3b2e6a90ab2ecfd9db04 to your computer and use it in GitHub Desktop.
Save bryanmaina/f168f46b81cf3b2e6a90ab2ecfd9db04 to your computer and use it in GitHub Desktop.
Download ZIP
swapy drag and drop
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
</head>
<body>
<div id="container"
style="position: relative; z-index: 10; display: flex; flex-direction: column; gap: 20px; max-width: 1536px; width: 100%;">
<div class="section-1" data-swapy-slot="foo"
style="width: 100%; height: 100%; background-color: green; grid-column: 1/1;">
<div class="content-a" data-swapy-item="a">
<!-- Your content for content-a goes here -->
content-a
</div>
</div>
<div class="section-2" data-swapy-slot="bar"
style="width: 100%; height: 100%; background-color: red; grid-column: 2/4;">
<div class="content-b" data-swapy-item="b">
<!-- Your content for content-b goes here -->
content-b
<div class="handle" data-swapy-handle>test handle</div>
</div>
</div>
<div class="section-3" data-swapy-slot="baz" style="width: 100%; height: 100%; background-color: blue; grid-column: 1/3;">
<div class="content-c" data-swapy-item="c">
<!-- Your content for content-c goes here -->
content-c
</div>
</div>
<div class="section-4" data-swapy-slot="bry"
style="width: 100%; height: 100%; background-color: orange; grid-column: 3/4;">
<div class="content-d" data-swapy-item="d">
<!-- Your content for content-c goes here -->
content-d
</div>
</div>
</div>
</body>
<script>
const container = document.getElementById('container')
// You can then use it like this
const swapy = Swapy.createSwapy(container, {
animation: 'dynamic' // or spring or none
})
swapy.enable(true)
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment