Drag and Drop List Using TypeScript
Last Updated :
23 Jul, 2025
A drag-and-drop sortable list in TypeScript lets users reorder items by dragging them to new positions. This is done using dragstart, dragend and dragover events for smooth DOM manipulation.
What We’re Going to Create
We’ll build a drag-and-drop sortable list with features like handling dragstart, dragover, and dragend events to interact with DOM elements.
- We will make a list in an unordered form.
- We will then put the heading for the unordered list.
- The list elements will be put in a vertical flex manner.
Project Preview
Drag and Drop Sortable List in TypescriptDrag and Drop sortable List - HTML and CSS code
This HTML and CSS code creates a stylish, interactive drag-and-drop sortable list. It uses smooth transitions and visual feedback for reordering items within a container, making the list both functional and visually appealing.
HTML
<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;
}
.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);
}
.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;
}
.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="list">
<li class="item" draggable="true">Item 1</li>
<li class="item" draggable="true">Item 2</li>
<li class="item" draggable="true">Item 3</li>
<li class="item" draggable="true">Item 4</li>
<li class="item" draggable="true">Item 5</li>
</ul>
<script defer src="lists.js"></script>
</body>
</html>
In this example
- The code creates a sortable list of items where each item is draggable, allowing the user to reorder the list.
- The list and its items are styled with a gradient background, soft shadows, and hover effects, making the interface visually appealing and interactive.
- When an item is dragged, its opacity is reduced, and a dashed border appears on the drop target, providing visual feedback for the user during the drag-and-drop action.
Drag and Drop sortable list – TypeScript Logic
This code implements a drag-and-drop sortable list where items can be rearranged through a smooth drag-and-drop interface. Using JavaScript and TypeScript, it leverages event listeners and DOM manipulation to update the list dynamically.
JavaScript
const list = document.querySelector('.list') as HTMLElement | null;
let dragging: HTMLElement | null = null;
if (list) {
list.addEventListener('dragstart', (e: DragEvent) => {
const target = e.target as HTMLElement;
if (target && target.classList.contains('item')) {
dragging = target;
target.classList.add('dragging');
}
});
list.addEventListener('dragend', () => {
if (dragging) {
dragging.classList.remove('dragging');
}
document.querySelectorAll('.item').
forEach(item => item.classList.remove('over'));
dragging = null;
});
list.addEventListener('dragover', (e: DragEvent) => {
e.preventDefault();
const afterElement = getDragAfterElement(list, e.clientY);
document.querySelectorAll('.item')
.forEach(item => item.classList.remove('over'));
if (afterElement && dragging) {
afterElement.classList.add('over');
list.insertBefore(dragging, afterElement);
} else if (dragging) {
list.appendChild(dragging);
}
});
}
function getDragAfterElement(container: HTMLElement,
y: number): HTMLElement | null {
const items = Array.prototype.slice.call(container.querySelectorAll<HTMLElement>
('.item:not(.dragging)')) as HTMLElement[];
return items.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset, element: child };
}
return closest;
}, { offset: Number.NEGATIVE_INFINITY, element: null }).element;
}
In this example
- When a list item is dragged, the dragging class is added to it, and the item is marked as the active dragged element.
- Once dragging ends, the dragging class is removed, and all items reset their hover state (over class).
- During dragging, the code identifies the item being dragged over and temporarily adds the over class, allowing the dragged item to be inserted before or after another item.
- The getDragAfterElement function calculates the closest item to the mouse pointer and positions the dragged item accordingly.
Convert to JavaScript File
Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command.
npx tsc lists.ts
tsc lists.ts
- The command tsc lists.ts compiles the lists.js TypeScript file into a lists.js JavaScript file.
- It places the output in the same directory as the input file by default.
Complete Code
HTML
<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;
}
.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);
}
.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;
}
.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="list">
<li class="item" draggable="true">Item 1</li>
<li class="item" draggable="true">Item 2</li>
<li class="item" draggable="true">Item 3</li>
<li class="item" draggable="true">Item 4</li>
<li class="item" draggable="true">Item 5</li>
</ul>
<script defer>
const list = document.querySelector('.list');
let dragging = null;
if (list) {
list.addEventListener('dragstart', function (e) {
const target = e.target;
if (target && target.classList.contains('item')) {
dragging = target;
target.classList.add('dragging');
}
});
list.addEventListener('dragend', function () {
if (dragging) {
dragging.classList.remove('dragging');
}
document.querySelectorAll('.item').forEach(function (item) {
item.classList.remove('over');
});
dragging = null;
});
list.addEventListener('dragover', function (e) {
e.preventDefault();
const afterElement = getDragAfterElement(list, e.clientY);
document.querySelectorAll('.item').forEach(function (item) {
item.classList.remove('over');
});
if (afterElement && dragging) {
afterElement.classList.add('over');
list.insertBefore(dragging, afterElement);
} else if (dragging) {
list.appendChild(dragging);
}
});
}
function getDragAfterElement(container, y) {
const items = Array.from(container.querySelectorAll('.item:not(.dragging)'));
return items.reduce(function (closest, child) {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset, element: child };
}
return closest;
}, { offset: Number.NEGATIVE_INFINITY, element: null }).element;
}
</script>
</body>
</html>
Similar Reads
Drag and Drop Sortable List Using ReactJS Building a drag and drop sortable list in ReactJS allows users to rearrange items interactively by dragging and dropping. This feature enhances the user experience by providing dynamic way to manage lists or items. In this article, we’ll explore how to implement a drag and drop sortable list in Reac
4 min read
Sortable Drag and Drop with React and Tailwind CSS In this tutorial, we'll learn how to create a sortable drag-and-drop feature in a React application using Vite for quick and efficient development, along with Tailwind CSS for styling. This feature allows users to reorder items in a list by dragging and dropping them, enhancing the user experience o
3 min read
How to create a To-Do list using Drag and Drop in Angular 7 ? We can easily create a To-Do list using Drag-Drop module provided by angular Component Development Kit (CDK). First of all, create an angular component by using the following command- ng g c To-Do Now import CdkDragDrop, moveItemInArray, transferArrayItem from @angular/cdk/drag-drop to our to-Do com
2 min read
Angular PrimeNG Drag and Drop Component Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will Angular PrimeNG Drag and Drop Component. The Drag and Drop directives (pDraggable and pDropp
6 min read
Building a Drag and Drop Interface with React Hooks Drag and Drop Interface feature is a simple React application that demonstrates the drag-and-drop functionality between two boxes. The boxes represent containers and items within them can be dragged and dropped from one box to another. This interactive and user-friendly feature is commonly used in v
4 min read
Drag and Drop Sortable List Using HTML CSS & JavaScript 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 ar
5 min read