jQueryのソートcomponent_jqueryの詳細な分析

1: Sortable コンポーネントは、ページ上の一連の要素を並べ替え可能な に変換できます。次に、マウスをドラッグして要素のリストを調整します。リスト内の要素の位置
$('.selector').sortable(options);
簡単な例:

コードをコピーします コードは次のとおりです:

 

   

     

休闲类小游戏

      ×

   

     
• 菠萝蛋糕

     
• 人品计算器

     
• 我的恐怖小屋

     
• 品茗闻香话茶道

     
• 暴打火柴人中文版

   

 

 

   

     

动作类小游戏

;グランドスラムファイナル＆lt;/li＆gt;
＆lt;/ul＆gt;
＆lt;/div＆gt;
＆lt;/div＆gt;＆lt; div id = "message_box1" class="message_box" >

< ;ul id="sortable3">

レンダリング:

3: コンポーネントを並べ替えるメソッド
3.1 シリアル化メソッド: このメソッドは、並べ替え可能な要素の id 属性をシリアル化して、送信できるフォームまたは Ajax 文字列の構文は次のとおりです:

$("#sortable").sortable(serialize", [options]);
3.2 toArray メソッド: このメソッドは、並べ替え可能な要素の ID を文字列にシリアル化します。構文形式は次のとおりです:
$("#sortable").sortable("toArray");
3.3 更新メソッド: メソッドが使用されます。ソート可能なリストを更新します
$("#sortable").sortable("refresh");
3.4 freshPositons メソッド :このメソッドはキャッシュを更新するために使用されますソート可能な要素の位置。構文形式は次のとおりです:
$("#sortable").sortable("refreshPositions");
3.5 cancel: メソッド現在の並べ替え可能なオブジェクト内の要素の順序変更をキャンセルするために使用されます
$("#sortable").sortable("cancel");

コードをコピー
コードは次のとおりです:

< script type="text/javascript" src="js/jquery.ui.widget.js">

调整以下の手順の整理順序

• 1.1 链接外部.JS 文件


• 1.2 Microsoft 脚本编辑器を使用


• 1.3 循環しながら使用する


• 1.4 循環に使用する

• 2句1 スイッチ语の使用


• 2.2 Array对プロパティの使用


• 2.3 String オブジェクトを使用するメソッド


• 2.4 Date オブジェクトを使用するメソッド

< ;input type="button" name="button" id="btn" value="确认修正" />

レンダリング:

ここでは att がキーとして使用され、値はレイアウト内で att で定義された文字列です。
4: ソート時のコールバック関数
コールバック関数を定義することで、ソート動作をより柔軟に制御できます
4.1 start: イベントタイプはsortstart、並べ替え開始時にトリガーされます
4.2 sort: イベント タイプはsort、並べ替えプロセス中にトリガーされます
4.3 変更: イベント タイプはsortchange、並べ替えプロセス中にトリガーされます 、要素の位置が変更されるとトリガーされます
4.4 beforestop: イベント タイプは sortbeforestop で、並べ替えが停止したがプレースホルダーまたは補助要素がまだ使用可能な場合にトリガーされます
4.5 stop: イベント タイプは sortstop で、並べ替えプロセスが停止したときにトリガーされます。
4.6 update: イベント タイプは sortupdate で、並べ替えプロセスが停止し、要素の位置が変更されたときにトリガーされます。
4.7 accept: イベント タイプは sortreceive、接続されたソート リストが別のリストから要素を受け取ったときにトリガーされます。
4.8 Remove: イベント タイプは sortremove、次のときにトリガーされます。要素がリストから削除されます 要素を並べ替えて別のリストに配置するとトリガーされます
4.9 以上: イベント タイプはソートオーバーで、並べ替え可能な要素が別の接続されたリストに移動されたときにトリガーされます
4.10 out: イベント タイプは sortout で、並べ替え可能な要素が接続されたリストから削除されたときにトリガーされます。
4.11 activate: イベント タイプは sortactivate で、接続されたソートリストが使用されます。各接続リストは、ドラッグの開始時にこのイベントを受け取ります。
4.12 deactivate: イベントのタイプはsortdeactivateで、ソート操作が停止されたときにトリガーされます。可能なすべての接続リスト

コードをコピー コードは次のとおりです:

$("#droppable ").droppable({
eventName: function (event, ui) {
}
});

ui は追加の要素を含む jQuery オブジェクトですjQuery オブジェクトには次のプロパティがあります。
helper: 並べ替えられる現在の要素を表す jQuery オブジェクト
position: top 属性と left 属性を含むオブジェクト元のオブジェクトを基準とした現在の要素の位置を示す属性
offset: ページを基準とした現在の要素の絶対位置を示す、top 属性と left 属性を含むオブジェクト
item: 現在ドラッグされている jQuery オブジェクトを表します
placeholder: 定義されたプレースホルダーを表します
sender: 現在ドラッグされている要素が属する並べ替えられたリストのみ2 つのリスト間の移動に適用可能

コードをコピー コードは次のとおりです:

< script type="text/javascript" src="js/jquery.ui.widget.js">







< h1>変更下面列の順序、イベント触発結果を見る

• K22次開始発行局：桂林 -> 终点站：北京西


• K180次始播站：郑州 -> 终点站：北京西


• K1038次 郑州 -> 终点站：深圳


• K236次 石家庄 -> 终点站：上海


• T182次汉口 -> 终点站：哈尔滨


• K926次 郑州 -> 终点站：哈尔滨

< /div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：親ウィンドウリンクの取得getParentメソッドとjs解析でウィンドウを開く各種メソッド_基礎知識次の記事：親ウィンドウリンクの取得getParentメソッドとjs解析でウィンドウを開く各種メソッド_基礎知識

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved