HTMLテーブルのマウスドラッグ&ドロップによる並べ替え機能
2022-01-08 09:28:35
レンダリングです。
1. ファイルの紹介
<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. ソート可能なクラスを要素にアタッチする
<tbody class="sortable">
<tr></tr>
<tr></tr>
</tbody>
3. 電源投入と設定
$(function() {
$(".sortable").sortable({
cursor: "move",
items: "tr", //just tr can be dragged
opacity: 0.6, //transparency is 0.6 when dragging
revert: true, //increase animation when released
update: function(event, ui) { //Update after sorting
var categoryids = $(this).sortable("toArray");
var $this = $(this);
}
});
$(".sortable").disableSelection();
});
上記は、HTMLテーブルのマウスドラッグ&ドロップによるソート機能を紹介するための小さなものです、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は、私にメッセージを与えてください、私は速やかにみんなに返信されます。これからもScript Houseをよろしくお願いします。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン