HTML table mouse drag and drop sorting function

This article mainly introduces relevant information about the mouse drag and drop sorting function of HTML table. Friends who need it can refer to the

renderings:

1.Introduce the file

<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.Give Attach the sortable class to the element

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

3. Open 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();
});

The above is the HTML table mouse drag and drop sorting function introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more articles related to the HTML table mouse drag and drop sorting function, please pay attention to the PHP Chinese website!