Comment implémenter le tri par glisser-déplacer de la souris dans un tableau HTML

Cette fois, je vais vous montrer comment implémenter le tri par glisser-déposer de tableaux en HTML. Quelles sont les précautions pour utiliser HTML pour implémenter le tri par glisser-déposer de tableaux. Voici un cas pratique, prenons un. regarder.

1. Importez 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. Joignez la classe tricapable

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

3. Ouvrez et configurez

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

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser la balise img des images HTML

Quels sont le nom, l'identifiant et la classe en HTML ? Quelle est la différence

Comment utiliser HTML+CSS pour afficher la barre de menu secondaire en glissant la souris

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!