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 Community Server 5.6.39 のインストール方法

この記事では、MySQLのダウンロードとインストールの詳細なチュートリアルを記載しています。具体的な...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

Docker での MySQL 8.0.20 のインストールと設定のチュートリアル

Dockerは参考までにMySQLバージョン8.0.20をインストールします。具体的な内容は以下のと...

goaccess を使用して nginx ログを分析する詳細な方法

最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

nodejs で worker_threads を使用して新しいスレッドを作成する方法

導入前の記事で述べたように、NodeJS には 2 種類のスレッドがあります。1 つは、ユーザー リ...

MySQL インデックスの一般的な問題の概要

Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...

MySQLの手順を完全に削除する

目次1. まずMySQLサーバーを停止する2. MySQLサーバーをアンインストールする3. MyS...

explainコマンドがMySQLデータを変更する理由

クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...

MySQL セレクトキャッシュメカニズムの使用に関する詳細な説明

MySQL クエリ キャッシュはデフォルトでオンになっています。ある程度、クエリの効果は向上しますが...

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...

HTML 選択オプションの基本的な理解と使用

JavaScript での HTML (選択オプション) の詳細な説明1. 基本的な理解:コードをコ...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル

目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...

backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明

単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...