Drag and Drop Sortable List Using HTML CSS & JavaScript
Last Updated :
06 Feb, 2025
Improve
The Drag and Drop Sortable List Project in JavaScript allows users to easily reorder items in a list using drag-and-drop functionality. This interactive tool enhances user experience by enabling smooth, dynamic list organization, ideal for applications like task managers or shopping lists.
What we are going to create
We’ll build an application that allows users to
- Interact with a sortable list using drag-and-drop functionality.
- Rearrange list items dynamically with smooth animations.
- Implement event listeners for dragstart, dragend, and dragover to manage the drag process.
- Use JavaScript to track the dragged item and position it correctly within the list.
- Provide visual feedback for valid drop targets during the dragging process.
Project Preview
Drag and Drop Sortable List - HTML and CSS Code
This code creates a drag-and-drop sortable list with a sleek UI using HTML and CSS. It includes a stylish design with smooth hover and drag effects.
<html>
<head>
<style>
body {
font-family: 'Poppins', sans-serif;
padding: 20px;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
text-align: center;
}
h2 {
margin-bottom: 20px;
font-size: 1.8em;
}
.sortable-list {
list-style: none;
padding: 0;
width: 350px;
margin: auto;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.sortable-item {
padding: 15px 20px;
margin: 8px 0;
background: rgba(255, 255, 255, 0.8);
border-radius: 5px;
font-size: 1.1em;
color: #333;
font-weight: bold;
cursor: grab;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.2s, transform 0.2s;
}
.sortable-item:hover {
background: #e8f0ff;
transform: scale(1.03);
}
.dragging {
opacity: 0.7;
transform: rotate(-2deg);
}
.over {
border: 2px dashed #ff8c42;
background: #fff3e0;
}
</style>
</head>
<body>
<h2>Drag and Drop Sortable List</h2>
<ul class="sortable-list">
<li class="sortable-item" draggable="true">Item 1</li>
<li class="sortable-item" draggable="true">Item 2</li>
<li class="sortable-item" draggable="true">Item 3</li>
<li class="sortable-item" draggable="true">Item 4</li>
<li class="sortable-item" draggable="true">Item 5</li>
</ul>
</body>
</html>
In this example
- A <ul> list (sortable-list) contains multiple <li> items (sortable-item), each marked draggable="true" to enable dragging.
- The body has a gradient background, while the list and items feature rounded corners, shadows, and hover effects for a smooth look.
- The .dragging class changes opacity and adds a slight tilt, while .over applies a dashed border and background color change when hovering.
Drag and Drop Sortable List -JavaScript
The JavaScript code enables drag-and-drop functionality by handling dragstart, dragend, and dragover events, allowing the user to reorder list items dynamically based on the mouse's vertical position.
const list = document.querySelector('.sortable-list');
let draggingItem = null;
list.addEventListener('dragstart', (e) => {
draggingItem = e.target;
e.target.classList.add('dragging');
});
list.addEventListener('dragend', (e) => {
e.target.classList.remove('dragging');
document.querySelectorAll('.sortable-item').forEach(item => item.classList.remove('over'));
draggingItem = null;
});
list.addEventListener('dragover', (e) => {
e.preventDefault();
const draggingOverItem = getDragAfterElement(list, e.clientY);
// Remove .over from all items
document.querySelectorAll('.sortable-item').forEach(item => item.classList.remove('over'));
if (draggingOverItem) {
draggingOverItem.classList.add('over'); // Add .over to the hovered item
list.insertBefore(draggingItem, draggingOverItem);
} else {
list.appendChild(draggingItem); // Append to the end if no item below
}
});
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.sortable-item:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
In this example
- The draggingItem variable stores the item currently being dragged (like identifying a point being moved).
- On dragstart, the dragged item is marked with a special class (dragging), visually indicating it’s being moved.
- On dragend, the dragged item’s special visual class is removed, and the variable draggingItem is reset (like finishing the movement and clearing the selection).
- On dragover, the script calculates where the mouse is vertically and highlights the item being hovered over, so the dragged item can be positioned correctly.
- The offset is calculated by subtracting the item's top position and dividing its height to determine if the mouse is closer to the top or bottom of an item, helping to decide if the dragged item should appear above or below the current item being hovered over.
Complete Code
<html>
<head>
<style>
body {
font-family: 'Poppins', sans-serif;
padding: 20px;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
text-align: center;
}
h2 {
margin-bottom: 20px;
font-size: 1.8em;
}
.sortable-list {
list-style: none;
padding: 0;
width: 350px;
margin: auto;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.sortable-item {
padding: 15px 20px;
margin: 8px 0;
background: rgba(255, 255, 255, 0.8);
border-radius: 5px;
font-size: 1.1em;
color: #333;
font-weight: bold;
cursor: grab;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.2s, transform 0.2s;
}
.sortable-item:hover {
background: #e8f0ff;
transform: scale(1.03);
}
.dragging {
opacity: 0.7;
transform: rotate(-2deg);
}
.over {
border: 2px dashed #ff8c42;
background: #fff3e0;
}
</style>
</head>
<body>
<h2>Drag and Drop Sortable List</h2>
<ul class="sortable-list">
<li class="sortable-item" draggable="true">Item 1</li>
<li class="sortable-item" draggable="true">Item 2</li>
<li class="sortable-item" draggable="true">Item 3</li>
<li class="sortable-item" draggable="true">Item 4</li>
<li class="sortable-item" draggable="true">Item 5</li>
</ul>
<script>
const list = document.querySelector('.sortable-list');
let draggingItem = null;
list.addEventListener('dragstart', (e) => {
draggingItem = e.target;
e.target.classList.add('dragging');
});
list.addEventListener('dragend', (e) => {
e.target.classList.remove('dragging');
document.querySelectorAll('.sortable-item')
.forEach(item => item.classList.remove('over'));
draggingItem = null;
});
list.addEventListener('dragover', (e) => {
e.preventDefault();
const draggingOverItem = getDragAfterElement(list, e.clientY);
document.querySelectorAll('.sortable-item').forEach
(item => item.classList.remove('over'));
if (draggingOverItem) {
draggingOverItem.classList.add('over');
list.insertBefore(draggingItem, draggingOverItem);
} else {
list.appendChild(draggingItem);
}
});
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll
('.sortable-item:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
</script>
</body>
</html>
