afian/shopify-draggable-example.html

## shopify-draggable-example.html
<!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>
	<!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>