Draggable List Template

An interactive list where users can reorder items with native drag-and-drop functionality.

This component is perfect for task managers, playlist builders, or any interface where users need to manually sort a list of items.

A screenshot of a list where one item is being dragged to a new position.

Get Source Code Preview

About this Template

This template provides a premium drag-and-drop experience using only the native HTML Drag and Drop API and vanilla JavaScript, requiring no external libraries. It works by setting the draggable="true" attribute on list items and then attaching a series of event listeners to manage the drag-and-drop lifecycle. The CSS provides clear visual feedback to the user by styling the item as it's being dragged and highlighting the potential drop location.

Features

Pure JavaScript & HTML: Uses the browser's built-in Drag and Drop API, so no external libraries are needed.
Clear Visual Feedback: The item being dragged gets a special .dragging class, and potential drop targets get a .drag-over class for clear styling hooks.
Intuitive Interaction: Users can grab an item by its handle and see exactly where it will be placed in the list upon release.
Mobile & Touch Friendly: While this example focuses on mouse events, the foundational logic can be extended with touch event listeners (touchstart, touchmove, touchend) for mobile devices.
Self-Contained: The entire component is self-contained and ready to be used in any project.

Code Breakdown

Each list item (li) has the HTML attribute draggable="true" to enable the native browser behavior.

The JavaScript logic revolves around several key event listeners attached to each draggable item:

dragstart: Fires when the user starts dragging an item. It adds a .dragging class to the item and stores a reference to it.
dragend: Fires when the user stops dragging. It is used to clean up by removing the .dragging class and clearing helper variables.
dragover: Fires continuously as an element is dragged over a valid drop target. We must call event.preventDefault() inside this handler to allow a drop to occur.
dragenter & dragleave: These fire when the dragged item enters or leaves a potential drop target. They are used here to toggle a .drag-over class for visual highlighting.
drop: Fires when the user releases the mouse over a valid drop target. This is where the core logic resides. The script determines where the dragged item should be placed relative to the drop target and uses insertBefore() or appendChild() to move the original dragged element to its new position in the DOM.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable List</title>
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

/* ==========================================================================
           Draggable List Component Styles - Copy from here
           ========================================================================== */
        .draggable-list-template {
            --drag-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --drag-text-color: #d1d5db;
            --drag-bg-color: #1f2937;
            --drag-border-color: #374151;
            --drag-handle-color: #6b7280;
            --drag-ghost-bg-color: #4f46e5;
            --drag-over-bg-color: #374151;
            
            font-family: var(--drag-font-family);
            color: var(--drag-text-color);
            width: 100%;
            max-width: 500px;
        }

.draggable-list-template *,
        .draggable-list-template *::before,
        .draggable-list-template *::after {
            box-sizing: border-box;
        }

.draggable-list-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }

.draggable-list-template .list-header h2 {
            font-size: 1.5rem;
            margin: 0;
            font-weight: 600;
        }
        
        #draggable-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 1rem;
        }
        
        .draggable-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            background-color: var(--drag-bg-color);
            border: 1px solid var(--drag-border-color);
            border-radius: .5rem;
            padding: 1.25rem;
            cursor: grab;
            user-select: none;
            transition: all 0.2s ease;
        }
        
        .draggable-item:active {
            cursor: grabbing;
        }
        
        .drag-handle {
            color: var(--drag-handle-color);
            cursor: grab;
        }

.drag-handle:active {
            cursor: grabbing;
        }

/* Drag states */
        .draggable-item.dragging {
            opacity: 0.5;
            transform: rotate(5deg);
            background-color: var(--drag-ghost-bg-color);
        }
        
        .draggable-item.drag-over {
            background-color: var(--drag-over-bg-color);
            border-color: var(--drag-ghost-bg-color);
        }

/* Drop indicator */
        .drop-indicator {
            height: 2px;
            background-color: var(--drag-ghost-bg-color);
            margin: 0.5rem 0;
            border-radius: 1px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

.drop-indicator.active {
            opacity: 1;
        }

</style>
</head>
<body>

<div class="draggable-list-template">
    <header class="list-header">
        <h2>Heist Prep Checklist</h2>
    </header>

<ul id="draggable-list">
        <li class="draggable-item" draggable="true">
            <span class="drag-handle"><i class="fa-solid fa-grip-vertical"></i></span>
            <span>Assemble the crew</span>
        </li>
        <li class="draggable-item" draggable="true">
            <span class="drag-handle"><i class="fa-solid fa-grip-vertical"></i></span>
            <span>Acquire blueprints (the older, the better)</span>
        </li>
         <li class="draggable-item" draggable="true">
            <span class="drag-handle"><i class="fa-solid fa-grip-vertical"></i></span>
            <span>Disable laser grid</span>
        </li>
        <li class="draggable-item" draggable="true">
            <span class="drag-handle"><i class="fa-solid fa-grip-vertical"></i></span>
            <span>Synchronize watches</span>
        </li>
        <li class="draggable-item" draggable="true">
            <span class="drag-handle"><i class="fa-solid fa-grip-vertical"></i></span>
            <span>Plan the dramatic double-cross</span>
        </li>
        <li class="draggable-item" draggable="true">
            <span class="drag-handle"><i class="fa-solid fa-grip-vertical"></i></span>
            <span>Arrange for a suspiciously convenient getaway van</span>
        </li>
    </ul>

// Add drag event listeners to all draggable items
            function addDragListeners() {
                const items = list.querySelectorAll('.draggable-item');
                
                items.forEach((item, index) => {
                    item.addEventListener('dragstart', handleDragStart);
                    item.addEventListener('dragend', handleDragEnd);
                    item.addEventListener('dragover', handleDragOver);
                    item.addEventListener('drop', handleDrop);
                    item.addEventListener('dragenter', handleDragEnter);
                    item.addEventListener('dragleave', handleDragLeave);
                });
            }

function handleDragStart(e) {
                draggedElement = this;
                draggedIndex = Array.from(list.children).indexOf(this);
                this.classList.add('dragging');
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/html', this.outerHTML);
            }

function handleDragEnd(e) {
                this.classList.remove('dragging');
                
                // Clean up all drag-over classes
                const items = list.querySelectorAll('.draggable-item');
                items.forEach(item => {
                    item.classList.remove('drag-over');
                });
                
                draggedElement = null;
                draggedIndex = null;
            }

function handleDragOver(e) {
                if (e.preventDefault) {
                    e.preventDefault();
                }
                e.dataTransfer.dropEffect = 'move';
                return false;
            }

function handleDragEnter(e) {
                if (this !== draggedElement) {
                    this.classList.add('drag-over');
                }
            }

function handleDragLeave(e) {
                this.classList.remove('drag-over');
            }

function handleDrop(e) {
                if (e.stopPropagation) {
                    e.stopPropagation();
                }

if (draggedElement !== this) {
                    const targetIndex = Array.from(list.children).indexOf(this);
                    
                    // Determine if we're inserting before or after the target
                    const rect = this.getBoundingClientRect();
                    const midpoint = rect.top + rect.height / 2;
                    const insertAfter = e.clientY > midpoint;
                    
                    if (insertAfter) {
                        // Insert after the target element
                        if (this.nextSibling) {
                            list.insertBefore(draggedElement, this.nextSibling);
                        } else {
                            list.appendChild(draggedElement);
                        }
                    } else {
                        // Insert before the target element
                        list.insertBefore(draggedElement, this);
                    }
                }

this.classList.remove('drag-over');
                return false;
            }

// Initialize drag listeners
            addDragListeners();
        });
    </script>
</div>

</body>
</html>

View Output