PHP, jQuery & Ajax Drag and Drop Table Rows: A Simple How-To

Drag and drop table rows are one of those features clients genuinely love. They're intuitive, satisfying to use, and - when built with PHP, jQuery and Ajax - they save the sort order to your database automatically, without a page reload.

Why Drag and Drop Sorting is Worth It

The idea came to me while I was updating MagicMan13. The old site had a static navigation menu that could only be changed via FTP. Not ideal. I replaced it with links stored in a database table, managed entirely through the admin area. That alone was a big improvement. But the real win was making the order of those links draggable - so Chris can rearrange the navigation whenever he wants, without touching any code. Want to add a testimonials page and slot it in between two existing links? Done in seconds.

So here's how to build a drag and drop table row sorter using PHP, jQuery, and AJAX. The table updates dynamically and saves the new order straight to your database on the fly.

Setting Up Your Database Table

First, make sure your database table has a position column. This is what stores the sort order and is central to the whole setup - you can see it in the example below.

CREATE TABLE pages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    url VARCHAR(255) NOT NULL,
    position INT NOT NULL DEFAULT 0
);

Building the Sortable Table

With that in place, you can build the table that displays your data. This is fairly straightforward - loop through your results and output each row.

<?php
$result = $pdo->query("SELECT id, title, url, position FROM pages ORDER BY position ASC");
?>

<table id="sortable-table">
    <tbody>
        <?php while ($row = $result->fetch(PDO::FETCH_ASSOC)): ?>
        <tr data-id="<?= $row['id'] ?>">
            <td><?= htmlspecialchars($row['title']) ?></td>
            <td><?= htmlspecialchars($row['url']) ?></td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>

On the same page, you make the table sortable using jQuery UI's .sortable() method, then fire an Ajax request whenever the order changes. One important note: .sortable() requires jQuery UI to be loaded, so make sure that's included in your page alongside jQuery.

$(function () {
    $('#sortable-table tbody').sortable({
        update: function () {
            var order = [];

            $('#sortable-table tbody tr').each(function (index) {
                order.push({
                    id: $(this).data('id'),
                    position: index + 1
                });
            });

            $.ajax({
                url: 'ajaxDBQuery.php',
                type: 'POST',
                data: { order: JSON.stringify(order) },
                success: function (response) {
                    console.log('Order saved:', response);
                }
            });
        }
    });
});

Handling the Ajax Update

Finally, create the server-side page that handles the database update - call it whatever you like (in this example, ajaxDBQuery.php). This receives the new row order from Ajax and updates each record's position in the database.

<?php
if (!empty($_POST['order'])) {
    $order = json_decode($_POST['order'], true);
    $stmt = $pdo->prepare("UPDATE pages SET position = :position WHERE id = :id");

    foreach ($order as $item) {
        $stmt->execute([
            ':position' => $item['position'],
            ':id'       => $item['id']
        ]);
    }
}

And that's it. A clean, practical drag and drop sorting system that keeps your UI flexible and your database in sync. Once it's in place, you'll find yourself reaching for it more often than you'd expect.