Sortables クラスは、「serialize」と呼ばれる優れたメソッドも提供します。これを使用すると、これらの要素の ID を配列として出力でき、サーバー側の開発に非常に便利です。次に、並べ替えられたアイテムの新しいコレクションを作成する方法を見ていきます。最後にデモを必ずご覧ください。
基礎知識
新しい Sortable オブジェクトを作成する
まず、並べ替える要素を変数に割り当てる必要があります。ソータブルの場合、複数のリスト間の要素を相互にドラッグできるようにしたい場合は、次のように、これらすべての要素を配列に入れる必要があります。
参照コード:
var sortableListsArray = $$('#listA, #listB');
このようにして、2 つの ul ID を配列に入れることができます。この配列から新しい並べ替え可能なオブジェクトを作成できるようになりました。
参照コード:
var sortableLists = new Sortables(sortableListsArray);
次の HTML が使用されると仮定します。
リファレンス コード:
- アイテム A1
アイテム A2アイテム A3 /ul>
- アイテム B2
- ;/li> ;
- Item B4
最終的には次のようになります。 A1
アイテム A2
アイテム A3
アイテム A4
アイテム B1
アイテム B2
アイテム B3
アイテム B4
並べ替えオプション
(必要な場合)独自の並べ替え可能なリストを完全に定義するには、これらのオプションを使用する必要があります。
constrain
デフォルト - false
このオプションは、並べ替え可能なリスト要素を複数の UL 間でドラッグできるかどうかを決定します。
たとえば、ソート可能なオブジェクトに 2 つの ul がある場合、オプション「constain:true」を設定することで、リストの要素を親ノード ul 内でのみ移動できるように「制限」できます。
参照コード:
コードをコピー
コードは次のとおりです:
clone
デフォルト - false
クローン オプションを使用すると、 " クローン要素はマウスの動きに従い、元の要素はそのまま残ります。次の例から clone オプションの使用方法を確認できます。
リファレンス コード:
コードをコピー
コードは次のとおりです。
コードをコピー
コードは次のとおりです:
var handleElements = $$( '.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
コードをコピー
コードは次のとおりです:
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 // デフォルトは 1
});
revert
デフォルト - false
revertパラメータは「false」またはFxのオプション値を受け入れることができます。 revert パラメータの Fx オプションを設定すると、要素が特定の位置に配置されたときに、対応する Fx 設定が適用されます。たとえば、「duration:long」を設定すると、マウスを放したときに、複製されたオブジェクトがこの時間内にその位置に戻るようになります。元に戻す効果を確認したい場合は、次の例を見てください:
参照コード:
var sortableLists = new Sortables(sortableListsArray, {
revert: false // デフォルトは false
});また、Fx オプションとして設定します
var sortableLists = new Sortables(sortableListsArray, {
revert: {
duration: 50
}
});
デフォルト - 4
スナップ パラメータを使用すると、要素をドラッグする前にマウスをドラッグする必要があるピクセル数を設定できます。
参照コード:
コードをコピー
コードは次のとおりです: var sortableLists = new Sortables( sortableListsArray, { snap: 10 // ユーザーはこのドラッグ リストのドラッグを開始するには 10px ドラッグする必要があります
});
並べ替え可能なイベント
並べ替え可能なイベントは非常に優れており、使い方も非常に簡単です。それぞれに、現在ドラッグされている要素が渡されます (コロン要素を使用した場合は、複製された要素ではなく、元の要素が使用されます)。
onStart - ドラッグの開始時にトリガーされます (スナップ トリガー後)
onSort - 項目の順序が変更されたときにトリガーされます
onComplete - 要素をドロップしたときにトリガーされます
これらのイベントについては後で詳しく説明します (後の例で効果を確認できます)。
分類可能なメソッド
私たちは多くのメソッドを使用してきましたが、それらについて詳しく話したことはありません。メソッドは本質的には関数ですが、特定のクラスに属します。しかし、クラスについて話すとき、もう一度全体的な概念を確立します。このプラグイン (これまで説明してきた他のプラグインと同様) はすべて同様のパターンに従います。「new」でプラグインを初期化し、1 つ以上のセレクター パラメーターを定義し、オプションを定義し、いくつかのイベントを追加し (そして作成します) 新しいソート可能なものはトゥイーンに似ています）。このパターンが授業の基本となります。最も基本的なクラスでは、いくつかのオプションと関数を保存して再利用できるようにします。メソッドはクラス内の特定の関数です。インスタンスの .set() メソッドと .get() メソッドは、要素の属性拡張メソッドです。 Fx.Tween では、.start() はメソッドです。より明確に理解するために、sortable メソッドを見てみましょう。
.detach();
.detach(); メソッドを使用すると、すべてのコントローラを切り離し、リスト全体をドラッグできなくなります。これは、ドラッグを無効にする場合に便利です。
.attach();
このメソッドは、コントローラーを並べ替え項目に関連付けます。.detach(); メソッドを使用した後、並べ替え関数を再度開始できます。
.addItems();
このメソッドを使用すると、並べ替えられたリストに新しい項目を追加できます。これは、ユーザーが新しい項目を追加できる並べ替えられたリストがあり、新しい項目を追加したら、その新しい項目で並べ替え機能を有効にする必要があることを意味します。
.removeItems();
このメソッドを使用すると、既存の並べ替えられたリストから一部の要素を削除できます。これは、並べ替えられたリスト内の一部の特別な項目をロックして、並べ替えに参加しないようにする必要がある場合に便利です。
.addLists();
既存の並べ替えられたリストに新しい項目を追加するだけでなく、並べ替えられたリストに新しいリストを追加することもできます。 .addLists(); メソッドを使用すると、複数のリストを追加できるため、複数の並べ替えオブジェクトを簡単に追加できます。
.removeLists();
を使用すると、並べ替えられたオブジェクトからリスト全体を削除できます。これは、いくつかの特別なリストをロックする必要がある場合に便利です。リストを削除しても、残りの項目は引き続き並べ替えられますが、削除されたリストはロックされます。
.serialize();
この並べ替え関数は非常に優れていますが、このデータを処理したい場合はどうすればよいでしょうか? .serialize() メソッドは、これらの項目 ID を順番に含む配列を返します。データを取得したいリストをインデックス値で選択できます。
メソッドの影響は、ここで説明できる範囲をはるかに超えています。これを初めて使用する場合は、これを概念への簡単な紹介として使用してください。メソッドとクラスについては、後のチュートリアルでさらに詳しく説明します。
コード例
次の例では、いくつかのオプション、すべてのイベント、および上記のすべてのメソッドを使用します。コメントを減らして説明を増やして、このコードが一目瞭然になることを願っています。以下のすべては domready イベント内に存在する必要があることに注意してください。
参照コード:
var sortableListsArray = $$('#numberlist, #letterlist');
var sortableLists = new Sortables(sortableListsArray, {
// When I move, make a copy to follow the mouse movement
clone: true,
// Defines the css class name of the drag controller (handle, handle)
handle: '.handle',
// Allows you to use special effects after dragging Bring it back to a certain position
revert: {
// Accept Fx options
duration: 50
},
// Determine the opacity of the dragged element instead of following the mouse Copy
opacity: .5,
onStart: function(el){
// What is passed is the element you are dragging
$('start_ind').highlight('#F3F865') ;
el.highlight('#F3F865');
},
onSort: function(el) {
// What is passed is the element you are dragging
$('sort_ind ').highlight('#F3F865');
},
onComplete: function(el) {
// What is passed is the element you are dragging
$('complete_ind'). highlight('#F3F865');
var listOne = sortableLists.serialize(0);
var listTwo = sortableLists.serialize(1);
$('numberOrder').set('text', listOne).highlight('#F3F865'); ;
$('letterOrder').set('text', listTwo).highlight('#F3F865'); ;
}
}). detach(); // Disable the controller so you have to click the buttons to make them draggable
var addListoSort = $('addListTest');
$('addListButton').addEvent('click', function(){
sortableLists.addLists(addListoSort);
});
$('removeListButton').addEvent('click', function(){
sortableLists.removeLists(addListoSort);
});
$('enable_handles').addEvent('click', function(){
sortableLists.attach();
});
$('disable_handles') .addEvent('click', function(){
sortableLists.detach();
});
var itemOne = $('one');
$('add_item').addEvent ('click', function(){
sortableLists.addItems(itemOne);
});
$('remove_item').addEvent('click', function(){
sortableLists. removeItems(itemOne);
});
The controller is not enabled by default (look at the code above carefully). To start drag sorting, you need to click on the "Enable Sorting" button.
Learn more
Refer to reading the section about sortable in the documentation .
Download a zip package with everything you need to get started
Includes MooTools 1.2's core library and extension (more) libraries, the example above, an external JavaScript file, a simple HTML page and a CSS file.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
