Maison > interface Web > tutoriel HTML > le corps du texte

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

小云云
Libérer: 2017-12-11 10:41:50
original
2094 Les gens l'ont consulté

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>
Copier après la connexion

2. Attachez la classe triable à l'élément

<tbody class="sortable">  
   <tr></tr>  
   <tr></tr>   
</tbody>
Copier après la connexion

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();  
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal