ホームページ > 記事 > ウェブフロントエンド > jqueryは要素のドラッグソートを実装します（コードが添付されています）
jqueryは要素のドラッグソートを実装します（コードが添付されています）
- php中世界最好的语言オリジナル
- 2018-04-26 09:28:222077ブラウズ
今回は、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は画像の一覧を表示します。 見やすくするために、少しスタイルを追加しました:7c928e1d211f36ec7310729fd46a47c1 e388a4556c0f65e1904146cc1a846bee 54153603597a11c0ecaca8d50659c6a5 94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee 42f9d5e1cca7403849efb03461e9dc4d fffa25a7818d82750bcdb1d93f1448b2 d1c056396ead6d6604ab822b507e6f06 0fc5c90f257c8bbe709da427d559475b bf6105e4f5d8de1e7369b22baf553752" title="73c2b177074e40726d0145cd07cfd221"> 9566dce7235c757661f3387e59eb332f" /> bed06894275b65c1ab86501b08a632eb 247b94fc9b32a7a895c80acdf798d00f eae969b2b8f4f46816c415c43cee3362 929d1f5ca49e04fdcb27f9465b944689 94b3e26ee717c64999d7867364b1b4a3まず、後でより簡潔に呼び出せるように、よく使用されるセレクターを保存します。これなら誰もが間違いなく問題ないでしょう。 ^_^
var show = jQuery("#show"); //输出提示
var orderlist = jQuery("#orderlist"); //原顺序
var check = jQuery("#check"); //是否更新到数据库元の並べ替え順序を非表示フィールドに保存します。ここでは配列のpush()メソッドを使用しており、ulの各liのタイトル（元の並び順）を配列に追加しています。最後に、join() メソッドを使用して元の配置順序を取得し、文字列を返します。並べ替え順序の形式は 1、2、3 になりました。
//保存原来的排列顺序
var order = [];
list.children("li").each(function() {
order.push(this.title); //原排列顺序保存在title，得到后更改title
jQuery(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join(',')); 次に、ajax update ブロックを分離します。このようにしてプログラムはよりクリーンになり、この領域には新しいものは何もありません。
//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("更新成功");
}
});
}; 並べ替え順序の取得と同様に、ID は文字列に構成され、Update() メソッドに渡されます。関数内のパラメータの更新は、チェックボックスが選択されているかどうかです。
//调用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("");
}
};最後に配置操作を行います。背景の部分は、元の配列順序に対応する現在の ID の更新です。これは誰もがよく知っていると思います。 データベース操作が実行されない場合、プラグインは要素のドラッグを完了するためにsorttableを呼び出すだけでよいことがわかります。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
sortElementsを使用してテーブルソートを実装する手順の詳細な説明jqueryを使用してテーブルソート+リアルタイム検索機能を実装する以上がjqueryは要素のドラッグソートを実装します（コードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。