Drag and Drop List Using TypeScript
Last Updated :
05 Feb, 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
How to Sort an Array in TypeScript ? Array sorting is the process of arranging the elements within an array in a specified order, often either ascending or descending based on predetermined criteria. Below are the approaches used to sort an array in typescript: Table of Content Method 1: Using sort methodMethod 2: Spread OperatorMethod
3 min read
How to Make a Generic Sorting Function in TypeScript ? Sorting is a fundamental operation in programming, allowing us to organize data in a specific order for easier manipulation and retrieval. In TypeScript, creating a generic sorting function provides flexibility and reusability across different data types. Table of Content Using Array.prototype.sort(
4 min read
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