JavaScript Drag and Drop Reorder List & Div

JavaScript Drag and Drop Reorder List
Code Snippet:Vanilla JavaScript - Drag Sort
Author: Fitri Ali
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 23,480
License: MIT
Edit Code online: View on CodePen
Read More

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.

1 thought on “JavaScript Drag and Drop Reorder List & Div”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X