<ul class="sortable-list" id="sortableList">
<li class="item" draggable="true">
<div class="details">
<span class="drag-handle">☰</span>
<span>Dashboard Design</span>
</div>
</li>
<li class="item" draggable="true">
<div class="details">
<span class="drag-handle">☰</span>
<span>Develop API</span>
</div>
</li>
<li class="item" draggable="true">
<div class="details">
<span class="drag-handle">☰</span>
<span>Fix Bugs</span>
</div>
</li>
<li class="item" draggable="true">
<div class="details">
<span class="drag-handle">☰</span>
<span>Deployment</span>
</div>
</li>
<li class="item" draggable="true">
<div class="details">
<span class="drag-handle">☰</span>
<span>Client Meeting</span>
</div>
</li>
</ul>
.sortable-list {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 400px;
background: #fff;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
padding: 20px;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #e5e7eb;
margin-bottom: 10px;
padding: 12px 15px;
border-radius: 8px;
background: #fff;
cursor: grab;
transition: box-shadow 0.2s;
}
.item:last-child {
margin-bottom: 0;
}
.item .details {
display: flex;
align-items: center;
gap: 12px;
color: #1f2937;
font-weight: 500;
}
.drag-handle {
color: #9ca3af;
cursor: grab;
}
/* Dragging Styles */
.item.dragging {
opacity: 0.5;
background: #f3f4f6;
border: 1px dashed #3b82f6;
}
const sortableList = document.getElementById("sortableList");
const items = sortableList.querySelectorAll(".item");
items.forEach(item => {
item.addEventListener("dragstart", () => {
setTimeout(() => item.classList.add("dragging"), 0);
});
item.addEventListener("dragend", () => {
item.classList.remove("dragging");
});
});
const initSortableList = (e) => {
e.preventDefault();
const draggingItem = document.querySelector(".dragging");
let siblings = [...sortableList.querySelectorAll(".item:not(.dragging)")];
let nextSibling = siblings.find(sibling => {
return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
});
sortableList.insertBefore(draggingItem, nextSibling);
}
sortableList.addEventListener("dragover", initSortableList);
sortableList.addEventListener("dragenter", e => e.preventDefault());
