Sortable List - Drag and Drop with CSS and JavaScript

Sortable lists allow users to easily rearrange items using drag-and-drop functionality. In this example, we demonstrate how to create an interactive list where elements change their position with a simple drag-and-drop action.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sortable List - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="sortable-list-container">
        <div class="sortable-list-box">
            <h3>Sortable List</h3>
            <p class="sortable-list-subtitle">Drag and drop items to change their order</p>
        
            <ul id="sortableList" class="sortable-list-ul">
                <li class="sortable-list-li" draggable="true">First item</li>
                <li class="sortable-list-li" draggable="true">Second item</li>
                <li class="sortable-list-li" draggable="true">Third item</li>
                <li class="sortable-list-li" draggable="true">Fourth item</li>
                <li class="sortable-list-li" draggable="true">Fifth item</li>
            </ul>
        
            <div class="sortable-list-info">
                💡 Use your mouse or long press on touch devices to move items
            </div>
        </div>
    </div>
</body>
</html>
        
                    

                        .sortable-list-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 30px 15px;
    background-color: var(--bg, #f8fafc);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.sortable-list-box {
    width: 100%;
    max-width: 480px;
    background-color: var(--card, #ffffff);
    padding: 30px;
    border-radius: 14px;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}

.sortable-list-box h3 {
    color: var(--fg, #1e293b);
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.sortable-list-subtitle {
    text-align: center;
    color: var(--fg, #64748b);
    opacity: 0.85;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.sortable-list-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Modern spacing instead of margins */
}

.sortable-list-li {
    background: var(--card, #ffffff);
    color: var(--fg, #334155);
    border: 1px solid var(--border, #e2e8f0);
    padding: 14px 18px;
    border-radius: 10px;
    cursor: grab; /* Set to "grab" for a nicer hand feel */
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    font-weight: 500;
}

/* Active state when grabbing the element */
.sortable-list-li:active {
    cursor: grabbing;
}

/* Modern dragging indicator (three dots) */
.sortable-list-li:before {
    content: "⋮⋮";
    margin-right: 15px;
    font-size: 14px;
    color: #94a3b8;
    letter-spacing: 1px;
}

.sortable-list-li:hover {
    border-color: var(--accent, #007bff);
    background-color: rgba(0, 123, 255, 0.02);
    color: red;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Element that is currently being dragged */
.sortable-list-li.sortable-list-dragging {
    opacity: 0.4;
    background-color: var(--bg, #f1f5f9) !important;
    border: 1px dashed var(--accent, #007bff);
    box-shadow: none;
    transform: scale(0.98);
}

/* Visual indicator for the target drop zone */
.sortable-list-li.sortable-list-drag-over {
    border-top: 2px solid var(--accent, #007bff);
    background-color: rgba(0, 123, 255, 0.04);
}

.sortable-list-info {
    background-color: rgba(0, 123, 255, 0.06);
    color: var(--accent, #007bff);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}
        
                    

                        // Safely wrap the entire script inside DOMContentLoaded
document.addEventListener("DOMContentLoaded", function() {
    const sortableList = document.getElementById('sortableList');
    if (!sortableList) return;

    const items = sortableList.querySelectorAll('.sortable-list-li');
    let draggedItem = null;

    items.forEach(item => {
        // When drag starts
        item.addEventListener('dragstart', function() {
            draggedItem = this;
            // A short delay ensures the style is added only after the browser creates the drag image
            setTimeout(() => this.classList.add('sortable-list-dragging'), 0);
        });

        // When drag ends
        item.addEventListener('dragend', function() {
            this.classList.remove('sortable-list-dragging');
            draggedItem = null;
        });

        // When element is dragged over another element
        item.addEventListener('dragover', function(e) {
            e.preventDefault(); // Necessary to allow dropping
        });

        // When element enters another element's area
        item.addEventListener('dragenter', function(e) {
            e.preventDefault();
            if (this !== draggedItem) {
                this.classList.add('sortable-list-drag-over');
            }
        });

        // When element leaves another element's area
        item.addEventListener('dragleave', function() {
            this.classList.remove('sortable-list-drag-over');
        });

        // When element is dropped
        item.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('sortable-list-drag-over');
            
            if (this !== draggedItem && draggedItem !== null) {
                // Get the updated list of elements for accurate index calculation
                let allItems = [...sortableList.querySelectorAll('.sortable-list-li')];
                let draggedIndex = allItems.indexOf(draggedItem);
                let targetIndex = allItems.indexOf(this);

                if (draggedIndex < targetIndex) {
                    // If moving the element down, insert it after the target element
                    this.parentNode.insertBefore(draggedItem, this.nextSibling);
                } else {
                    // If moving the element up, insert it before the target element
                    this.parentNode.insertBefore(draggedItem, this);
                }
            }
        });
    });
});
        
                    

RESULT