HTML table mouse drag sorting function

HTML table mouse drag sorting function

Effect picture:

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", //Only tr can be dragged opacity: 0.6, //When dragging, the transparency is 0.6  
        revert: true, //When releasing, add animation update: function(event, ui) { //After updating the sort var categoryids = $(this).sortable("toArray");  
            var $this = $(this);  
        }  
    });  
    $(".sortable").disableSelection();  
});

The above is the HTML table mouse drag sorting function introduced by the editor. I hope it will be helpful to everyone. 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 everyone for their support of the 123WORDPRESS.COM website!

<<:  Linux system repair mode (single user mode)

>>:  Comprehensive inventory of important log files in MySQL

Recommend

Make your website run fast

Does performance really matter? Performance is im...

Div exceeds hidden text and hides the CSS code beyond the div part

Before hiding: After hiding: CSS: Copy code The co...

How to implement page screenshot function in JS

"Page screenshot" is a requirement ofte...

How to use CSS attribute selectors to splice HTML DNA

CSS attribute selectors are amazing. They can hel...

Delegating Privileges in Linux Using Sudo

Introduction to sudo authority delegation su swit...

Example of using the href attribute and onclick event of a tag

The a tag is mainly used to implement page jump, ...

Detailed explanation of pure SQL statement method based on JPQL

JPQL stands for Java Persistence Query Language. ...

Several specific methods of Mysql space cleaning

Table of contents Preface 1. Check the file disk ...

Detailed process of installing various software in Docker under Windows

1. Install MySQL # Download mysql in docker docke...

Implementing a simple age calculator based on HTML+JS

Table of contents Preface Demonstration effect HT...

A brief discussion on whether too many MySQL data queries will cause OOM

Table of contents Impact of full table scan on th...