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
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
How to Drag and Drop Images using HTML5 ? In this article, we will see how to create a drag and drop functionality using HTML5. Approach: The following approach will be implemented to Drag and Drop Images using HTML5. We have given a rectangle area and an image, the task is to drag the image and drop it into the rectangle.We have to enable
2 min read
script.aculo.us Drag & Drop The DragDrop module can be used to make any element draggable or then it can be dropped in a drop zone. Making An element Draggable: Draggable elements can be made by making a draggable instance and then identifying the element to be made draggable Syntax: new Draggable( element_id, {options} ); Dra
3 min read
Implement Drag and Drop using React Component To add drag and drop functionality in your React application, you can use libraries like "react-beautiful-dnd" or "react-dnd". These libraries provide components and hooks that simplify the process of creating draggable and droppable elements in your UI. By wrapping your draggable items with the app
4 min read
Angular PrimeNG PickList DragDrop Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
3 min read
script.aculo.us Drag & Drop change Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The change option is called just like the onDrag option, i.e. it is
2 min read
Drag and Drop Files in ElectronJS ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.T
8 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
Angular PrimeNG OrderList DragDrop Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn about OrderList DragDrop in Angular PrimeNG. The OrderList component
3 min read
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