Home  >  Article  >  Web Front-end  >  HTML table mouse drag and drop sorting function_HTML/Xhtml_Web page production

HTML table mouse drag and drop sorting function_HTML/Xhtml_Web page production

PHP中文网
PHP中文网Original
2016-05-16 16:45:261420browse

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

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. 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. Editor Will reply to everyone promptly. I would also like to thank everyone for your support of the Script House website!

Statement:
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