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 システム修復モード (シングル ユーザー モード)

推薦する

myBatis で条件を削除する際のスプライシング問題を解決する

私は今日、mybatis を学び、データベースに対していくつかの簡単な追加、削除、変更、クエリを実行...

MySQL データベース操作 (作成、選択、削除)

MySQL データベースの作成MySQL サービスにログインしたら、create コマンドを使用し...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...

要素シャトルフレームのパフォーマンス最適化の実装

目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...

VUE ユニアプリの基本コンポーネントの簡単な紹介

1. スクロールビュー垂直スクロールを使用する場合は、固定の高さを指定して CSS で高さを設定する...

MySQL マルチインスタンス構成ソリューション

1.1 MySQL マルチインスタンスとは何ですか?簡単に言うと、MySQL マルチインスタンスとは...

DockerにRedisをインストールし、設定ファイルとして起動する詳細な説明

更新: 最近、サーバーがマイニング ウイルスによってハッキングされたことが判明しました。これは、おそ...

MySQL InnoDB ストレージ エンジンの詳細

序文MySQL では、InnoDB はストレージ エンジン レイヤーに属し、プラグインとしてデータベ...

MySQL でのサブクエリの基本的な使用法

目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...

Vue デフォルトスロットの理解とサンプルコード

目次スロットとは何かデフォルトスロットの理解コードスニペット要約するスロットとは何かスロットは、親コ...

Docker ベースの GitLab 環境をデプロイする方法と手順

注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...

Linux statコマンドの使用

1. コマンドの紹介stat コマンドは、ファイルまたはファイル システムに関する詳細情報を表示する...

CSS はモバイル デバイスで水平スクロール ナビゲーション バーを実装します (PC デバイスにも適用可能)

関数の起源最近、水平スクロール バーを必要とする H5 に取り組んでいました。いくつかのドキュメント...

HTMLは読み取り専用のテキストボックスを実装しており、コンテンツを変更することはできません。

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!--方法 1: onf...

Web 標準アプリケーション: Tencent QQ ホームページの再設計

Tencent QQのホームページがリニューアルされ、Webフロントエンド開発がますます注目を集めて...