Step 1
Duplicate the boxes to add more options. Be sure to keep the attributes and class names the same. MS Box and MS Boxes are required class names.
Step 2
Add the following code to the header of your page or site.
<style>
[draggable] {
user-select: none;
}
[data-value] {
pointer-events: none;
}
</style>
Step 3
Next up, you can change the styling of boxes which are about to "replaced."
Step 4
If you want to use a hidden/disabled input then you can add the following code to an embed in Webflow. You can change NAME to be anything you like.
<input type="hidden" data-input="drag-order" maxlength="256" name="NAME" data-name="NAME" id="NAME" data-ms-member="FIELD_ID" required="">
The data-ms-member part is only required if you're using Memberstack.
Step 5
Last, and most importantly, you need to add the following code before the closing </body> tag.
<!--🟢 DRAG N DROP 🟢-->
<script>
document.addEventListener('DOMContentLoaded', (event) => { var dragSrcEl = null;
function handleDragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this; e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
} function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
} e.dataTransfer.dropEffect = 'move';
return false;
} function handleDragEnter(e) {
this.classList.add('over');
} function handleDragLeave(e) {
this.classList.remove('over');
} function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]'); let orderList = Array.from(orderedBoxes).map(function(box) {
return box.innerHTML;
}).join(','); let input = document.querySelector('input[data-input="drag-order"]'); input.value = orderList; return false;
} function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
let items = document.querySelectorAll('.ms-boxes .ms-box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart, false);
item.addEventListener('dragenter', handleDragEnter, false);
item.addEventListener('dragover', handleDragOver, false);
item.addEventListener('dragleave', handleDragLeave, false);
item.addEventListener('drop', handleDrop, false);
item.addEventListener('dragend', handleDragEnd, false);
}); // Set initial value of the input field
let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]');
let orderList = Array.from(orderedBoxes).map(function(box) {
return box.innerHTML;
}).join(',');
let input = document.querySelector('input[data-input="drag-order"]');
input.value = orderList;
});
</script>
Credits
ChatGPT and this article on WebDev