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

Are you still Select *?

There are many reasons why an application is as s...

HTML page common style (recommended)

As shown below: XML/HTML CodeCopy content to clip...

How to use CSS to achieve data hotspot effect

The effect is as follows: analyze 1. Here you can...

Gradient slide effect implemented by CSS3

Achieve results Code html <div class="css...

Detailed explanation of MySQL deadlock and database and table sharding issues

Record the problem points of MySQL production. Bu...

WeChat applet scroll-view realizes left and right linkage

This article shares the specific code for WeChat ...

Front-end development must learn to understand HTML tags every day (1)

2.1 Semanticization makes your web pages better u...

Ubuntu regularly executes Python script example code

Original link: https://vien.tech/article/157 Pref...

JavaScript implements large file upload processing

Many times when we process file uploads, such as ...

Use CSS to switch between dark mode and bright mode

In the fifth issue of Web Skills, a technical sol...

Summary of pitfalls of using nginx as a reverse proxy for grpc

background As we all know, nginx is a high-perfor...

Problems and experiences encountered in web development

<br />The following are the problems I encou...

How to implement the builder pattern in Javascript

Overview The builder pattern is a relatively simp...