HTML テーブル マウス ドラッグ ソート機能

HTML テーブル マウス ドラッグ ソート機能

効果画像:

1. ファイルをインポートする

<script src="js/jquery-1.10.1.min.js"></script>  
<link rel="スタイルシート" href="Public/css/jquery-ui.min.css">  
<script src="js/jquery-ui.min.js"></script>

2.要素にsortableクラスを付加する

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

3. 有効化と設定

$(関数() {  
    $(".sortable").sortable({  
        カーソル: "移動",  
        items: "tr", //ドラッグできるのはtrのみ opacity: 0.6, //ドラッグ時の透明度は0.6  
        revert: true, // 解放時にアニメーションを追加 update: function(event, ui) { // ソートを更新した後 var categoryids = $(this).sortable("toArray");  
            var $this = $(this);  
        }  
    });  
    $(".sortable").disableSelection();  
});

上記はエディターが紹介した HTML テーブルのマウス ドラッグ ソート機能です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  CnBlogs カスタムブログスタイルの共有

>>:  Linux システム修復モード (シングル ユーザー モード)

推薦する

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...

CentOS7 システムでスワップを増やす方法の例

序文スワップは、ディスク上にある「仮想メモリ」の一部である特殊なファイル (またはパーティション) ...

JSは賞金の重さに基づいて当選確率を計算します

目次1. シナリオ例1.1. 抽選の賞品名を設定する1.2. 各賞の重みを設定する1.3. ラッキー...

MySQL タイムスタンプ比較クエリで遭遇する落とし穴と解決策

目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...

MySQL で URL タイムゾーンの罠を回避する方法

序文最近、MySQL 6.0.x 以降の jar を使用する場合、コード URL リンクで serv...

MySQL における explain の役割の詳細な説明

1. MYSQLインデックスインデックス: MySQL がデータを効率的に取得するのに役立つデータ構...

Docker Consul コンテナ サービスの更新と見つかった問題の概要

目次1. コンテナサービスの更新とDockerコンサルの検出1. サービス登録と検出とは何ですか? ...

Vueモバイル端末が指のスライド効果を実現

この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...

MySQLのREDOログとUNDOログの詳細な説明

MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...

Mysql データベースの高度なビュー、トランザクション、インデックス、自己接続、ユーザー管理の例の分析の使用

この記事では、ビュー、トランザクション、インデックス、自己接続、ユーザー管理など、MySQL データ...

SQL 実践演習: オンライン モール データベースの製品カテゴリ データ操作

オンラインショッピングモールデータベース - 商品カテゴリデータ操作(I)プロジェクトの説明電子商取...

JavaScriptはフォームデータの非同期送信を実装します

この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...

フォアマン Ubuntu16 クイックインストール

クイックスタートガイドForeman インストーラーは、完全に機能する Foreman セットアップ...