JavaScript Drag and Drop Reorder List & Div

This lightweight JavaScript code snippet helps you to create drag and drop reorder list functionality. It allows you to rearrange any elements within a parent node with a class name "drag-sort-enable" or anything with an event function handleDrag() and handleDrop(). This code snippet doesn’t support touch devices to sort lists with the drag and drop method. Anyhow, it is useful for desktop version webpages/apps to allow users to sort lists by the drag and drop method.

How to create JavaScript Drag and Drop Reorder List

1. In HTML, create a ul element with the class name "drag-sort-enable" and place your list items inside it. Basically, you can add this class name to your existing list or any parent element whose child elements you want to rearrangeable.

  <ul class="drag-sort-enable">
    <li>Application</li>
    <li>Blank</li>
    <li>Class</li>
    <li>Data</li>
    <li>Element</li>
  </ul>

2. The CSS styles for the rearrangeable lists are optional. Anyhow, you need to set styles for the class "drag-sort-active". It shows the active styles when lists are dragging. The CSS styles for the unordered list can be defined according to your needs.

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 5px 0;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    background: #e52d27;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b31217, #e52d27);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b31217, #e52d27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    color: #fff;
    list-style: none;
}

li.drag-sort-active {
    background: transparent;
    color: transparent;
    border: 1px solid #4ca1af;
}

span.drag-sort-active {
    background: transparent;
    color: transparent;
}

3. Finally, add the following JavaScript function between the <script> and </script> tag before closing the body tag.

/* Made with love by @fitri
 This is a component of my ReactJS project
https://www.codehim.com/vanilla-javascript/javascript-drag-and-drop-reorder-list */

function enableDragSort(listClass) {
  const sortableLists = document.getElementsByClassName(listClass);
  Array.prototype.map.call(sortableLists, (list) => {enableDragList(list)});
}

function enableDragList(list) {
  Array.prototype.map.call(list.children, (item) => {enableDragItem(item)});
}

function enableDragItem(item) {
  item.setAttribute('draggable', true)
  item.ondrag = handleDrag;
  item.ondragend = handleDrop;
}

function handleDrag(item) {
  const selectedItem = item.target,
        list = selectedItem.parentNode,
        x = event.clientX,
        y = event.clientY;
  
  selectedItem.classList.add('drag-sort-active');
  let swapItem = document.elementFromPoint(x, y) === null ? selectedItem : document.elementFromPoint(x, y);
  
  if (list === swapItem.parentNode) {
    swapItem = swapItem !== selectedItem.nextSibling ? swapItem : swapItem.nextSibling;
    list.insertBefore(selectedItem, swapItem);
  }
}

function handleDrop(item) {
  item.target.classList.remove('drag-sort-active');
}

(()=> {enableDragSort('drag-sort-enable')})();

That’s all! hopefully, you have successfully integrated this drag and drop reorder list into your project. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.