Skip to content

Instantly share code, notes, and snippets.

@mrkiril
Created December 27, 2020 20:57
Show Gist options
  • Save mrkiril/68443306a0133094940ea4914ea0dc0c to your computer and use it in GitHub Desktop.
Save mrkiril/68443306a0133094940ea4914ea0dc0c to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Entire bundle -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
</head>
<style>
li {
width: 100px;
height: 100px;
background-color: black;
margin: 50px;
color: white;
font-size: 36px;
}
</style>
<body>
<ul>
<li swapitem>1</li>
<li swapitem>2</li>
<li swapitem>3</li>
</ul>
<script>
const swappable = new Draggable.Swappable(
document.querySelectorAll('li'), {
draggable: '[swapItem]',
delay: 0,
}
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment