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

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

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

マウスをドラッグして次のオプションの順序を調整します

• 
  
• 火曜日


• 水曜日


• 木曜日


• 金曜日 li>
  
• 土曜日


• 土曜日

< ;/div>

レンダリング:

2: 関連ソートリスト
通常、2 つ以上のリストを同時にソートすることは関連ソートリストと呼ばれ、属性 connectWidth を使用して 1 つのセレクターを設定し、順序を指定できるようにします。要素が異なるリスト間で移動される

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

 

   

     

休闲类小游戏

      ×

   

     
• 菠萝蛋糕

     
• 人品计算器

     
• 我的恐怖小屋

     
• 品茗闻香话茶道

     
• 暴打火柴人中文版

   

 

 

   

     

动作类小游戏

;グランドスラムファイナル＆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");

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

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

• 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="确认修正" />

div>

レンダリング:

ここでは 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 つのリスト間の移動に適用可能

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

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

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


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


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


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


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


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