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

Step 1

Be sure to keep all the classnames, or update them in your code. They are required for this input to function.

Step 2

Add the following CSS to your page or site settings. Place the on the page to preview changes

Step 3

Change the styling of these elements right in Webflow. To style the handle and hover states edit the custom CSS.

Step 4 - Option A

Last, and most importantly, you need to add the following code before the closing </body> tag.

<!--🟢 RANGE SLIDERS 🟢-->
<script>
function rangeSlider() {
 var sliders = document.querySelectorAll('.ms-range-slider');  sliders.forEach(function(slider) {
   var range = slider.querySelector('.ms-range-slider-bar'),
       value = slider.querySelector('.ms-range-slider-value');    value.innerHTML = range.value;    range.addEventListener('input', function() {
     value.innerHTML = this.value;
   });
 });
}rangeSlider();
</script>

Credits

The Simple Range Slider project by Adam Whitten