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

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

高洛峰
高洛峰Original
2017-02-13 13:56:411320Durchsuche

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>

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 chinesischen PHP-Website bedanken!

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

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