Draggable List

<!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>