HTML implements 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.Attach the element sortable class

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

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