Implementierung der Sortierfunktion per Drag-and-Drop für Tabellen in HTML

小云云
Freigeben: 2017-12-11 10:41:50
Original
2088 Leute haben es durchsucht

Tabelle ist ein unverzichtbares Attribut in HTML. Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Drag-and-Drop-Sortierfunktion von HTML vor alle.

Rendering:

1 Importieren Sie die Datei

<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

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

an

3. Öffnen und konfigurieren

$(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

Haben Sie es schon gelernt? Beeilen Sie sich und machen Sie es selbst.

Verwandte Empfehlungen:

Hinweise zur Tabellenverschachtelung in HTML

Table, tr, td, th Wie man diese verwendet Tabellen-Tag-Elemente

Detailliertes Beispiel dafür, wie jQuery die Tabelle sortiert

Das obige ist der detaillierte Inhalt vonImplementierung der Sortierfunktion per Drag-and-Drop für Tabellen in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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