Make a Sortable List With Draggable Items Using JavaScript

No frameworks needed

Photo by Ralph Blvmberg on Unsplash

A question on Stack Overflow piqued my interest. It was about creating a list that can determine if the order of items is correct. Items are dragged by the user to change the order until it’s correct.

In this article, I’ll go over how to achieve this with vanilla JavaScript, HTML, and CSS. First, let’s initialize the variables we’ll need throughout the code.

var list = document.getElementById('list')
var base, randomized, dragging, draggedOver;
var isRight = 'Not In Order!';

Now we can write a function that accepts an array as an argument. From this argument, we will create two arrays, base which will provide the base order the numbers are supposed to be in, and randomized which will be the out-of-order base that will be rendered as a list. base can be created by slicing the passed array, creating a new array so as to prevent base values from being binded to randomized.

We can randomize the order for randomized by sorting the provided array based on whether a generated random number between 0 and 1 is greater than or less than 0.5.

randomized = a.sort(() => Math.random() - 0.5)

Now that we have our base and randomized arrays, we can check to see if the randomization process returned the same order by mistake. If it did return the same order, then we use recursion to call the randomization again. We do this until the orders are no longer the same.

Now we can start working on a function to actually render the items as a list. We’ll call it renderItems.

This is the function that will initially render our list and re-render it when the user changes the order.