Being able to reorder rows in a table is an important feature in any interactive web app for usability and organization. Creating draggable rows in a table using JavaScript is a very simple way to implement this. This tutorial guides you through this step-by-step process.
Benefits of Draggable Table Rows
Users can:
- Drag and drop to dynamically organize data.
- Prioritize content visually.
- Develop customizable layouts for user friendliness.
Step-By-Step Guide to Making Draggable Table Rows
To implement draggable table rows in your project, follow these steps:
- Create the Basic Table Structure
Create a simple HTML table. Each row in the table must have its own identifier for tracking.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Draggable table rows in JavaScript with a visually appealing design and seamless functionality."> <title>Draggable Table Rows in JavaScript</title> </head> <body> <p>Draggable Table Rows</p> <table class="draggable-table" id="draggable-table"> <thead> <tr> <th>Item</th> <th>Description</th> </tr> </thead> <tbody> <tr draggable="true"> <td>Item 1</td> <td>First item description</td> </tr> <tr draggable="true"> <td>Item 2</td> <td>Second item description</td> </tr> <tr draggable="true"> <td>Item 3</td> <td>Third item description</td> </tr> </tbody> </table> </body> </html> - Add JavaScript for Drag-and-Drop Functionality
Use JavaScript to implement the drag-and-drop functionality:const table = document.getElementById("draggable-table"); let draggedRow = null; table.addEventListener("dragstart", (e) => { draggedRow = e.target.closest("tr"); draggedRow.classList.add("is-dragging"); }); table.addEventListener("dragover", (e) => { e.preventDefault(); const hoveringRow = e.target.closest("tr"); if (hoveringRow && hoveringRow !== draggedRow) { table.tBodies[0].insertBefore(draggedRow, hoveringRow.nextSibling || hoveringRow); } }); table.addEventListener("dragend", () => { draggedRow.classList.remove("is-dragging"); draggedRow = null; }); - Styling the table enhance UX
Add some CSS to highlight the draggable rows when the interaction occurs.* { font-family: "Source Sans Pro", sans-serif; } body { padding: 0; margin: 0; width: 100%; height: 100vh; position: relative; background: #2196F3; } p { font-size: 0.75em; font-weight: bold; position: absolute; top: 15%; width: 100%; letter-spacing: 5px; text-transform: uppercase; text-align: center; color: white; user-select: none; } .draggable-table { position: absolute; top: 25%; left: 20%; width: 60%; height: 50%; border-collapse: collapse; background: white; -webkit-box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1); } .draggable-table .draggable-table__drag { font-size: 0.95em; font-weight: lighter; text-transform: capitalize; position: absolute; width: 100%; text-indent: 50px; border: 1px solid #f1f1f1; z-index: 10; cursor: grabbing; -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05); opacity: 1; } .draggable-table thead th { height: 25px; font-weight: bold; text-transform: capitalize; padding: 10px; user-select: none; } .draggable-table tbody tr { cursor: grabbing; } .draggable-table tbody tr td { font-size: 0.95em; font-weight: lighter; text-transform: capitalize; text-indent: 50px; padding: 10px; user-select: none; border-top: 1px solid whitesmoke; } .draggable-table tbody tr:nth-child(even) { background-color: #f7f7f7; } .draggable-table tbody tr:nth-child(odd) { background-color: #ffffff; } .draggable-table tbody tr.is-dragging { background: #f1c40f; } .draggable-table tbody tr.is-dragging td { color: #ffe683; }
After following through, the user will have the fun of dragging the rows in the table and setting them in their order.
This can be fitted to task managers, priority lists, or data dashboards.
This is how interactiveness, with drag and drop in JavaScript for table rows, becomes commonplace and practically useful. That is the power of combining HTML, CSS, and JavaScript for a graceful user experience through implementation specific to a given project.
Leave a Reply