Drag and drop functionality has become a popular feature in web development, allowing users to easily rearrange and organize content on a page. This feature is particularly useful when dealing with large amounts of data, such as tables. In this article, we will explore how to create drag and drop sortable tables in HTML.
To begin, let's first understand what a sortable table is. A sortable table is a table that allows users to rearrange rows and columns by simply clicking and dragging them to a new position. This makes it easier for users to find and sort through data, rather than having to scroll through a long list or resort to using filters.
To create a drag and drop sortable table, we will be using the HTML <table> tag, which is used to create a table on a webpage. The table tag consists of <tr> (table row) and <td> (table data) tags to define the structure of the table. To make our table sortable, we will also need to include the <thead> and <tbody> tags. The <thead> tag is used to define the header section of the table, while the <tbody> tag is used to define the body section of the table.
Let's start by creating a simple table with some dummy data:
<table>
<thead>
<tr>
<th>Student Name</th>
<th>Maths</th>
<th>Science</th>
<th>English</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>85</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<td>Jane</td>
<td>75</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>Mark</td>
<td>90</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>Sarah</td>
<td>80</td>
<td>95</td>
<td>85</td>
</tr>
</tbody>
</table>
In order to make this table sortable, we will need to add some additional attributes to the <table> tag. These attributes are "draggable" and "ondragover". The "draggable" attribute allows the table rows to be draggable, while the "ondragover" attribute specifies the event that will be triggered when the user drags an element over the table. Let's add these attributes to our table:
<table draggable="true" ondragover="allowDrop(event)">
<thead>
<tr>
<th>Student Name</th>
<th>Maths</th>
<th>Science</th>
<th>English</th>
</tr>
</thead>
<tbody>
<tr draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)">
<td>John</td>
<td>85</td>
<td>90</td>
<td>95</td>
</tr>
<tr draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)">
<td>Jane</td>
<td>75</td>
<td>80</td>
<td>90</td>
</tr>
<tr draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)">
<td>Mark</td>
<td>90</td>
<td>85</td>
<td>80</td>
</tr>
<tr draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)">
<td>Sarah</td>
<td>80</td>
<td>95</td>
<td>85</td>
</tr>
</tbody>
</table>
Now, we need to add some JavaScript functions to handle the drag and drop events. Let's create our functions:
<script>
function allowDrop(event) {
event.preventDefault();
}
function dragStart(event) {
event.dataTransfer.setData("text", event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>
The "allowDrop" function prevents the default action from occurring when an element is dragged over
