Implementation of table mouse drag sorting function in HTML

Table is an indispensable attribute in HTML. We need to use it in many places. This article mainly introduces the relevant information about the HTML table mouse drag and drop sorting function. Friends who need it can refer to it. I hope it can help everyone.

Rendering:

##1. Import files

<script src="js/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="Public/css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>

2. Attach the sortable class to the element

<tbody class="sortable">
   <tr></tr>
   <tr></tr>
</tbody>

3. Enable and configure

$(function() {
    $(".sortable").sortable({
        cursor: "move",
        items: "tr", //只是tr可以拖动
        opacity: 0.6, //拖动时，透明度为0.6
        revert: true, //释放时，增加动画
        update: function(event, ui) { //更新排序之后
            var categoryids = $(this).sortable("toArray");
            var $this = $(this);
        }
    });
    $(".sortable").disableSelection();
});

Have you learned the lesson? Hurry up and do it yourself.

Related recommendations:

Notes on table nesting in HTML

Table, tr, td, th How to use these table tag elements

Detailed example of how jQuery sorts the table

The above is the detailed content of Implementation of table mouse drag sorting function in HTML. For more information, please follow other related articles on the PHP Chinese website!