Home > Web Front-end > HTML Tutorial > HTML implements mouse drag and drop sorting function

HTML implements mouse drag and drop sorting function

巴扎黑
Release: 2017-05-14 13:58:10
Original
2418 people have browsed it

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>
Copy after login

2.Attach the element sortable class


<tbody class="sortable">  
   <tr></tr>  
   <tr></tr>   
</tbody>
Copy after login

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template