php – Drag and drop table that handles the sorting of a second table-ThrowExceptions

Exception or error:

I am looking for someone that can point me in the right direction. What i would like to create is a small table with 3 or 4 values that handles the sorting of a second table. Per example:

Table 1 (drag and drop)

  • Name
  • age
  • gender

Table 2

  • content

When i drag and drop (rearrange) items in the first table that should create the sorting for the second table. The position of the rows in the table is the sorting order. First by name then age then gender.

I hope this makes sence.

Any help is welcome.

Regards, Meton

How to solve:

Usually we use don’t use “Tables” to reorder columns. We give dragging capability to the table headers. Following your design, that expects to separate criteria selectors from the table but with a small change where I replaced the first table by a list.

In this code I’m using jQuery-UI sortable because it would allow us to Keep track of indexes while dragging those li items.


In the Sortable’ update event which is triggered right after dragging is done, we can get the current dragged item new index by using ui.item.index() , we swap indexes and store them in a data property like here data-id to be reused in any eventual further dragging event.

$(document).ready(function () {
	$('#selectors').sortable({
		disabled: false,
		//dragging horizontally is less conveniant with li items

		axis: 'y',
		forceHelperSize: true,
		update: function (event, ui) {
			var Newpos = ui.item.index();
			var oldPos = ui.item.attr("data-id");
			if (Newpos > oldPos) {
				$("table tr").each(function () {
					$(this).children(":eq(" + Newpos + ")").after($(this).children(":eq(" + oldPos + ")"));
				});
			} else {
				$("table tr").each(function () {
					$(this).children(":eq(" + Newpos + ")").before($(this).children(":eq(" + oldPos + ")"));
				});
			}
			$('.info').text('From:' + oldPos + ' to ' + Newpos);
			//Update & swap positions indexes in data-id after dragging

			$("li[data-id='" + Newpos + "']").attr('data-id', oldPos);
			ui.item.attr('data-id', Newpos);
		}
	}).disableSelection();
});
.sel:Hover {
    cursor: move;
}
.sel{
border:1px solid blue;
width:80px;
margin:2px;
}
.list {
    list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span class="info"></span>
<ul id="selectors" class="list">
    <li class="sel" data-id="0">Name</li>
    <li class="sel" data-id="1">Age</li>
    <li class="sel" data-id="2">Gender</li>
</ul>

<table id="content" style="width:100%" border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>John</td>
    <td>50</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>30</td>
    <td>Female</td>
  </tr>
    <tr>
    <td>Meg</td>
    <td>30</td>
    <td>Female</td>
  </tr>
</table>

Leave a Reply

Your email address will not be published. Required fields are marked *