Heim >Web-Frontend >HTML-Tutorial >HTML-Tisch-Maus-Drag-and-Drop-Sortierfunktion_HTML/Xhtml_Webseitenproduktion

HTML-Tisch-Maus-Drag-and-Drop-Sortierfunktion_HTML/Xhtml_Webseitenproduktion

PHP中文网
PHP中文网Original
2016-05-16 16:45:261473Durchsuche

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:

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>

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

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

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

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 Script House-Website bedanken!

Stellungnahme:
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