jqueryは要素のドラッグソートを実装します（コードが添付されています）
今回は、jquery で要素のドラッグ ソートを実装するための (コード付き) をご紹介します。jquery で要素のドラッグ ソートを実装するための 注意事項は何ですか。実際のケースを見てみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery学习-jquery对元素拖动排序</title>
<style type="text/css">
#show
{
color: Red;
}
#list
{
cursor: move;
width: 300px;
}
#list li
{
border: solid 1px yellow;
float: left;
list-style-type
: none;
margin-top: 10px;rreee
ユーザーが選択すると、画像をドラッグしたときにデータベース内のデータの並べ替えが変更されます。隠しフィールドには、写真の元の順序が保存されます。 ulは画像の一覧を表示します。 見やすくするために、少しスタイルを追加しました:<span id="show">
<p>
<input id="check" type="checkbox" />
</p>
<p>
<input type="hidden" id="orderlist" />
<ul id="list">
<asp:Repeater ID="rptOrder" runat="server">
<ItemTemplate>
<li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
<img alt="img" src="<%#Eval("Link") %>" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</p>var show = jQuery("#show"); //输出提示
var orderlist = jQuery("#orderlist"); //原顺序
var check = jQuery("#check"); //是否更新到数据库//保存原来的排列顺序
var order = [];
list.children("li").each(function() {
order.push(this.title); //原排列顺序保存在title，得到后更改title
jQuery(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join(','));//ajax更新
var Update = function(itemid, itemorder) {
jQuery.ajax({
type: "post",
url: "update.aspx",
//id:新的排列对应的ID,order：原排列顺序
data: { id: itemid, order: orderlist.val() },
beforeSend: function() {
show.html("正在更新");
},
success: function() {
show.html("更新成功");
}
});
};//调用ajax更新方法
var Submit = function(update) {
var order = [];
list.children("li").each(function() {
order.push(this.id);
});
var itemid = order.join(',');
//如果单选框选中，则更新表中排列顺序
if (update) {
Update(itemid);
}
else {
show.html("");
}
};が実行されない場合、プラグインは要素のドラッグを完了するためにsorttableを呼び出すだけでよいことがわかります。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
sortElementsを使用してテーブルソートを実装する手順の詳細な説明jqueryを使用してテーブルソート+リアルタイム検索機能を実装する以上がjqueryは要素のドラッグソートを実装します（コードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7715
15
1641
14
1395
52
1289
25
1232
29
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
WPS スコアを並べ替える方法
Mar 20, 2024 am 11:28 AM
私たちの仕事では、wps ソフトウェアをよく使用します。wps ソフトウェアではデータを処理する方法がたくさんあり、機能も非常に強力です。平均値や要約などを求める関数をよく使用します。統計データに使用できるメソッドは、WPS ソフトウェア ライブラリで誰でも利用できるように用意されています。以下では、WPS でスコアをソートする手順を紹介します。これを読んだ後、経験から学ぶことができます。 1. まず、ランク付けする必要があるテーブルを開きます。以下に示すように。 2. 次に、数式 =rank(B2, B2: B5, 0) を入力します。必ず 0 を入力してください。以下に示すように。 3. 数式を入力した後、コンピュータのキーボードの F4 キーを押すと、相対参照が絶対参照に変更されます。
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
エクセルで並べ替える方法
Mar 05, 2024 pm 04:12 PM
Excel での並べ替え方法: 1. 単一列の並べ替え; 2. 複数列の並べ替え; 3. カスタム並べ替え。詳細な紹介: 1. 単一列の並べ替えは、最も一般的な並べ替え方法です。選択した列に従って並べ替えられます。2. 複数列の並べ替えは、複数の列でデータを並べ替えることを指します。通常は、最初に特定の列に従って並べ替えられます。 of、別の列で並べ替える; 3. カスタム並べ替え、ユーザーが独自のニーズに応じて並べ替え順序を定義できるようにします。
データ統計を容易にするために WPS テーブルをソートする方法
Mar 20, 2024 pm 04:31 PM
WPS は、テキスト編集、データ テーブル、PPT プレゼンテーション、PDF 形式、フローチャート、その他の機能を含む、非常に完成度の高いオフィス ソフトウェアです。その中でも私たちがよく使うのはテキスト、表、デモであり、私たちにとって最も馴染みのあるものでもあります。私たちの研究では、データ統計を作成するために WPS テーブルを使用することがあります。たとえば、学校は各生徒の得点を数えます。非常に多くの生徒の得点を手動で並べ替える必要がある場合、本当に頭の痛い作業になります。実際、WPS テーブルにはこの問題を解決する並べ替え機能があるため、心配する必要はありません。次に、WPS を並べ替える方法を一緒に学びましょう。方法のステップ: ステップ 1: まず、並べ替える必要がある WPS テーブルを開く必要があります。
Power Query で複数の列をドラッグ アンド ドロップで並べ替える方法
Mar 14, 2024 am 10:55 AM
この記事では、PowerQuery で複数の列をドラッグ アンド ドロップで並べ替える方法を説明します。さまざまなソースからデータをインポートする場合、列が希望の順序にならないことがよくあります。列の順序を変更すると、分析やレポートのニーズに合った論理的な順序で列を配置できるだけでなく、データの読みやすさが向上し、フィルタリング、並べ替え、計算の実行などのタスクが高速化されます。 Excelで複数の列を並べ替えるにはどうすればよいですか? Excel で列を再配置する方法はたくさんあります。列ヘッダーを選択し、目的の場所にドラッグするだけです。ただし、多くの列を含む大きなテーブルを扱う場合、このアプローチは面倒になる可能性があります。列をより効率的に再配置するには、拡張されたクエリ エディターを使用できます。クエリの強化
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
PHPで配列内の値をサイズで並べ替える方法
Mar 22, 2024 pm 05:24 PM
PHP は、Web サイト開発およびデータ処理分野で広く使用されている、一般的に使用されるサーバー側スクリプト言語です。 PHP では、配列内の値をサイズで並べ替えるのは非常に一般的な要件です。組み込みのソート関数を使用すると、配列を簡単にソートできます。以下では、PHP を使用して配列内の値をサイズで並べ替える方法を、具体的なコード例とともに紹介します。 1. 配列内の値を昇順に並べ替えます。
