Implémentation de la fonction de tri par glisser-déplacer de la souris en HTML

Le tableau est un attribut indispensable en HTML.Nous l'utilisons dans de nombreux endroits.Cet article présente principalement les informations pertinentes sur la fonction de tri par glisser-déposer de la souris du tableau HTML.Les amis qui en ont besoin pourront s'y référer. tout le monde.

Rendu :

1. Importer le fichier

<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. Attachez la classe triable à l'élément

<tbody class="sortable">  
   <tr></tr>  
   <tr></tr>   
</tbody>

3. Ouvrir et configurer

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

L'avez-vous appris ? Dépêchez-vous et faites-le vous-même.

Recommandations associées :

Notes sur l'imbrication des tableaux en HTML

Table, tr, td, th Comment les utiliser éléments de balise de table

Exemple détaillé de la façon dont jQuery trie la table

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!