Heim > Web-Frontend > HTML-Tutorial > Drag-and-Drop-Sortierfunktion für HTML-Tabellenmaus

Drag-and-Drop-Sortierfunktion für HTML-Tabellenmaus

高洛峰
Freigeben: 2017-02-13 13:56:41
Original
1386 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zur Maus-Drag-and-Drop-Sortierfunktion von HTML-Tabellen vorgestellt. Freunde, die sie benötigen, können sich auf das

Rendering beziehen:

HTML table鼠标拖拽排序功能

HTML table鼠标拖拽排序功能

1. Dateien importieren

<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>
Nach dem Login kopieren

2 . Hängen Sie die sortierbare Klasse an das Element an

<tbody class="sortable">  
   <tr></tr>  
   <tr></tr>   
</tbody>
Nach dem Login kopieren

3. Öffnen und konfigurieren Sie

$(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();  
});
Nach dem Login kopieren

Das Obige ist die vom Editor eingeführte Drag-and-Drop-Sortierfunktion für HTML-Tabellen. Wenn Sie Fragen haben, verlassen Sie diese bitte Mir eine Nachricht. Der Herausgeber wird allen umgehend antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zur Drag-and-Drop-Sortierfunktion für HTML-Tabellenmaus finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage