Drag and Drop Sortable List Using HTML CSS & JavaScript

Last Updated : 06 Feb, 2025

The Drag and Drop Sortable List Project in JavaScript allows users to easily reorder items in a list using drag-and-drop functionality. This interactive tool enhances user experience by enabling smooth, dynamic list organization, ideal for applications like task managers or shopping lists.

What we are going to create

We’ll build an application that allows users to

Interact with a sortable list using drag-and-drop functionality.
Rearrange list items dynamically with smooth animations.
Implement event listeners for dragstart, dragend, and dragover to manage the drag process.
Use JavaScript to track the dragged item and position it correctly within the list.
Provide visual feedback for valid drop targets during the dragging process.

Project Preview

Screenshot-2025-01-15-101039 — Drag and Drop Sortable List using HTML CSS & JavaScript

Drag and Drop Sortable List - HTML and CSS Code

This code creates a drag-and-drop sortable list with a sleek UI using HTML and CSS. It includes a stylish design with smooth hover and drag effects.

HTML

<html>
<head>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            padding: 20px;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: #fff;
            text-align: center;
        }
        h2 {
            margin-bottom: 20px;
            font-size: 1.8em;
        }
        .sortable-list {
            list-style: none;
            padding: 0;
            width: 350px;
            margin: auto;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        .sortable-item {
            padding: 15px 20px;
            margin: 8px 0;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            font-size: 1.1em;
            color: #333;
            font-weight: bold;
            cursor: grab;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background 0.2s, transform 0.2s;
        }
        .sortable-item:hover {
            background: #e8f0ff;
            transform: scale(1.03);
        }
        .dragging {
            opacity: 0.7;
            transform: rotate(-2deg);
        }
        .over {
            border: 2px dashed #ff8c42;
            background: #fff3e0;
        }
    </style>
</head>
<body>
    <h2>Drag and Drop Sortable List</h2>
    <ul class="sortable-list">
        <li class="sortable-item" draggable="true">Item 1</li>
        <li class="sortable-item" draggable="true">Item 2</li>
        <li class="sortable-item" draggable="true">Item 3</li>
        <li class="sortable-item" draggable="true">Item 4</li>
        <li class="sortable-item" draggable="true">Item 5</li>
    </ul>
</body>
</html>

In this example

A <ul> list (sortable-list) contains multiple <li> items (sortable-item), each marked draggable="true" to enable dragging.
The body has a gradient background, while the list and items feature rounded corners, shadows, and hover effects for a smooth look.
The .dragging class changes opacity and adds a slight tilt, while .over applies a dashed border and background color change when hovering.

Drag and Drop Sortable List -JavaScript

The JavaScript code enables drag-and-drop functionality by handling dragstart, dragend, and dragover events, allowing the user to reorder list items dynamically based on the mouse's vertical position.

JavaScript

const list = document.querySelector('.sortable-list');
  let draggingItem = null;

  list.addEventListener('dragstart', (e) => {
    draggingItem = e.target;
    e.target.classList.add('dragging');
  });

  list.addEventListener('dragend', (e) => {
    e.target.classList.remove('dragging');
    document.querySelectorAll('.sortable-item').forEach(item => item.classList.remove('over'));
    draggingItem = null;
  });

  list.addEventListener('dragover', (e) => {
    e.preventDefault();
    const draggingOverItem = getDragAfterElement(list, e.clientY);

    // Remove .over from all items
    document.querySelectorAll('.sortable-item').forEach(item => item.classList.remove('over'));

    if (draggingOverItem) {
      draggingOverItem.classList.add('over'); // Add .over to the hovered item
      list.insertBefore(draggingItem, draggingOverItem);
    } else {
      list.appendChild(draggingItem); // Append to the end if no item below
    }
  });

  function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.sortable-item:not(.dragging)')];

    return draggableElements.reduce((closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = y - box.top - box.height / 2;
      if (offset < 0 && offset > closest.offset) {
        return { offset: offset, element: child };
      } else {
        return closest;
      }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
  }

In this example

The draggingItem variable stores the item currently being dragged (like identifying a point being moved).
On dragstart, the dragged item is marked with a special class (dragging), visually indicating it’s being moved.
On dragend, the dragged item’s special visual class is removed, and the variable draggingItem is reset (like finishing the movement and clearing the selection).
On dragover, the script calculates where the mouse is vertically and highlights the item being hovered over, so the dragged item can be positioned correctly.
The offset is calculated by subtracting the item's top position and dividing its height to determine if the mouse is closer to the top or bottom of an item, helping to decide if the dragged item should appear above or below the current item being hovered over.

Complete Code

HTML

<html>
<head>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            padding: 20px;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: #fff;
            text-align: center;
        }
        h2 {
            margin-bottom: 20px;
            font-size: 1.8em;
        }
        .sortable-list {
            list-style: none;
            padding: 0;
            width: 350px;
            margin: auto;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        .sortable-item {
            padding: 15px 20px;
            margin: 8px 0;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            font-size: 1.1em;
            color: #333;
            font-weight: bold;
            cursor: grab;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background 0.2s, transform 0.2s;
        }
        .sortable-item:hover {
            background: #e8f0ff;
            transform: scale(1.03);
        }
        .dragging {
            opacity: 0.7;
            transform: rotate(-2deg);
        }
        .over {
            border: 2px dashed #ff8c42;
            background: #fff3e0;
        }
    </style>
</head>
<body>
    <h2>Drag and Drop Sortable List</h2>
    <ul class="sortable-list">
        <li class="sortable-item" draggable="true">Item 1</li>
        <li class="sortable-item" draggable="true">Item 2</li>
        <li class="sortable-item" draggable="true">Item 3</li>
        <li class="sortable-item" draggable="true">Item 4</li>
        <li class="sortable-item" draggable="true">Item 5</li>
    </ul>
    <script>
        const list = document.querySelector('.sortable-list');
        let draggingItem = null;
        list.addEventListener('dragstart', (e) => {
            draggingItem = e.target;
            e.target.classList.add('dragging');
        });
        list.addEventListener('dragend', (e) => {
            e.target.classList.remove('dragging');
            document.querySelectorAll('.sortable-item')
                .forEach(item => item.classList.remove('over'));
            draggingItem = null;
        });
        list.addEventListener('dragover', (e) => {
            e.preventDefault();
            const draggingOverItem = getDragAfterElement(list, e.clientY);
            document.querySelectorAll('.sortable-item').forEach
                (item => item.classList.remove('over'));
            if (draggingOverItem) {
                draggingOverItem.classList.add('over');
                list.insertBefore(draggingItem, draggingOverItem);
            } else {
                list.appendChild(draggingItem); 
            }
        });
        function getDragAfterElement(container, y) {
            const draggableElements = [...container.querySelectorAll
                ('.sortable-item:not(.dragging)')];
            return draggableElements.reduce((closest, child) => {
                const box = child.getBoundingClientRect();
                const offset = y - box.top - box.height / 2;
                if (offset < 0 && offset > closest.offset) {
                    return { offset: offset, element: child };
                } else {
                    return closest;
                }
            }, { offset: Number.NEGATIVE_INFINITY }).element;
        }
    </script>
</body>
</html>

Drag and Drop Sortable List Using HTML CSS & JavaScript

lunatic1

Improve

Article Tags :

Drag and Drop Sortable List Using HTML CSS & JavaScript

What we are going to create

Project Preview

Drag and Drop Sortable List - HTML and CSS Code

Drag and Drop Sortable List -JavaScript

Complete Code

Similar Reads

Thank You!

What kind of Experience do you want to share?