Skip to content

Instantly share code, notes, and snippets.

@atonse

atonse/tldraw.html

Created November 17, 2023 03:10
Show Gist options
  • Save atonse/a7b00999f0744d0f499b250b631ccb24 to your computer and use it in GitHub Desktop.
Save atonse/a7b00999f0744d0f499b250b631ccb24 to your computer and use it in GitHub Desktop.
Download ZIP
Code generated by tldraw.
Raw
tldraw.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Links</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/@shopify/[email protected]"></script>
<style>
#link-categories {
list-style: none;
padding: 0;
}
.link-category {
background-color: #f3f4f6;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
}
.link {
background-color: #e5e7eb;
border-radius: 0.25rem;
padding: 0.5rem;
margin-bottom: 0.5rem;
cursor: grab;
}
.draggable-mirror {
opacity: 0.95;
}
.draggable--original {
opacity: 0.2;
}
</style>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-lg">
<ul id="link-categories">
<li class="link-category" data-category="1">
<h3 class="font-semibold text-lg mb-2">Link Category 1</h3>
<ul class="link-list" data-id="1">
<li class="link" draggable="true">Link 1</li>
<li class="link" draggable="true">Link 2</li>
</ul>
</li>
<li class="link-category" data-category="2">
<h3 class="font-semibold text-lg mb-2">Link Category 2</h3>
<ul class="link-list" data-id="2"></ul>
</li>
<li class="link-category" data-category="3">
<h3 class="font-semibold text-lg mb-2">Link Category 3</h3>
<ul class="link-list" data-id="3"></ul>
</li>
</ul>
</div>
<script>
const containers = document.querySelectorAll('.link-list');
if (containers.length) {
const sortable = new Draggable.Sortable(containers, {
draggable: '.link',
mirror: {
constrainDimensions: true,
},
});
sortable.on('sortable:start', () => {
document.body.style.cursor = 'grabbing';
});
sortable.on('sortable:stop', () => {
document.body.style.cursor = 'default';
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment