Skip to content

Instantly share code, notes, and snippets.

@afian
Created May 27, 2023 06:27
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save afian/0a6eeee91d2d38d5c275c3187f2f4a1a to your computer and use it in GitHub Desktop.
Shopify Draggable example code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.horizontal-menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.horizontal-menu li {
display: inline-block;
}
.horizontal-menu li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
.horizontal-menu li,
li.draggable-mirror {
border: 1px solid black;
padding: 10px !important;
margin: 0 5px !important;
width: 100px !important;
text-align: center;
cursor: grab !important;
list-style: none;
line-height: 20px;
height: 20px !important;
font-weight: bold;
color: #fff;
}
.horizontal-menu li:active {
cursor: grabbing !important;
}
</style>
</head>
<body>
<ul class="horizontal-menu sortable">
<li style="background-color: #00a8ff;">lorem</li>
<li style="background-color: #9c88ff;">ipsum</li>
<li style="background-color: #fbc531;">dolor</li>
<li style="background-color: #4cd137;">sit</li>
<li style="background-color: #487eb0;">amet</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.2/lib/draggable.min.js"></script>
<script>
const horizontalMenu = document.querySelector('.horizontal-menu');
const sortable = new Draggable.Sortable(document.querySelectorAll('.sortable'), {
draggable: 'li'
});
sortable.on('sortable:start', () => {
console.log('sortable:start');
});
sortable.on('sortable:sort', () => {
console.log('sortable:sort');
});
sortable.on('sortable:sorted', () => {
console.log('sortable:sorted');
});
sortable.on('sortable:stop', () => {
setTimeout(updateListItems, 10);
console.log('sortable:stop');
});
updateListItems();
function updateListItems() {
const listItems = horizontalMenu.querySelectorAll('li');
listItems.forEach((listItem, index) => {
const spanElement = listItem.querySelector('span');
if (!spanElement) {
const newSpan = document.createElement('span');
newSpan.textContent = ` ${index + 1} `;
listItem.appendChild(newSpan);
} else {
spanElement.textContent = ` ${index + 1} `;
}
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment