Open In App

Drag and Drop Sortable List Using HTML CSS & JavaScript

Last Updated : 06 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

Next Article
Create a Photo Filters and Effects Project using HTML CSS & JavaScript
author
lunatic1
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox