<div x-data="{ 
    items: [{ id: 1, content: 'Task 1' }, { id: 2, content: 'Task 2' }, { id: 3, content: 'Task 3' }],
    dragging: null,
    dragOver: null,
    onDragStart(id) { this.dragging = id; },
    onDragOver(id) { this.dragOver = id; },
    onDrop(targetId) {
        if (this.dragging === targetId) return;
        const fromIndex = this.items.findIndex(i => i.id === this.dragging);
        const toIndex = this.items.findIndex(i => i.id === targetId);
        const item = this.items.splice(fromIndex, 1)[0];
        this.items.splice(toIndex, 0, item);
        this.dragging = null;
        this.dragOver = null;
    }
}">
    <template x-for="item in items" :key="item.id">
        <div :draggable="true"
             @dragstart="onDragStart(item.id)"
             @dragover.prevent="onDragOver(item.id)"
             @drop="onDrop(item.id)"
             :class="dragOver === item.id ? 'border-blue-400 bg-blue-50' : 'border-gray-200'"
             class="flex items-center gap-3 p-4 border-2 rounded-lg cursor-grab transition-all">
            <span x-text="item.content"></span>
        </div>
    </template>
</div>