Sortable v1.0：新機能

こんにちはHabr！ 新しい年の前夜に、 Sortable v1.0のリリースである喜びを共有したいと思います。 ちょうど1年前、ドラッグアンドドロップを使用してリストを並べ替える小さなツールを裁判所に提出しました。 この間ずっと、細心の注意を払ってフィードバックを収集し、新機能とマイナーバグルールを追加しました。 以下では、新機能、 AngularJS 、 Meteor 、その他のニュアンスとの統合について説明します。

はじめに

ソート可能は、リスト内およびリスト間でソートを整理するための最小限のツールです。 ライブラリはjQueryまたは他のソリューションから独立しており、ネイティブDrag'n'Drop APIを使用して、デスクトップデバイスとタッチデバイスの両方で動作します。 シンプルなAPIを持ち、プロジェクトに簡単に統合でき、 jQueryUI / Sortableの優れた代替品です;]

そして、このリリースの新機能：

• 高度なグループ（柔軟な移動設定など）
• アニメーションを移動する
• スマートスクロールブラウザウィンドウとリスト
• 並べ替えを無効にする（ドラッグ可能およびドロップ可能の出力を許可します）
• ソートの取得および変更方法
• フィルタリング能力
• AngularJSとMeteorのサポート

高度なグループ

当初から、ライブラリにはグループ間を移動する機能がありました。グループに同じ名前を付けるだけで十分です。

// foo  bar —   HTMLElement Sortable.create(foo, { group: 'shared', }); Sortable.create(bar, { group: 'shared' }); 

http://jsbin.com/yexine/1/edit
時間が経つにつれて、これでは十分ではないことが明らかになりました。 たとえば、あるリストだけが与え、別のリストが要素のみを受け入れるようにすることは不可能でした。 さらに、重要な欠点は、いくつかのグループの相互作用を何らかの形で整理する能力の欠如でした。 発生したタスクを実現し、将来の拡張の可能性を残しながら、現在のインターフェイスを失わないソリューションを作成する必要がありました。

これで、 `group`オプションを次のプロパティを持つオブジェクトとして設定できます：

• name-グループの名前。
• pull-リスト間を移動するときに要素を「引き出す」機能。同じプロパティが `clone`の値を取ることができます。
• put-別のグループまたは許可されたグループの配列から要素を受け入れる機能。

どのように機能するかは、例で説明する方が簡単です。

• 「A」、「B」、「C」の3つのリストがあります。
• 「A」と「B」から「C」にドラッグする必要があります。「A」と「B」の間で転送することはできません。
• 「A」からドラッグすると、その場所に「クローン」が表示されます。

すべての可能性を一度に示すために、この問題を2つの方法で解決します。

一般グループ	いくつかのグループ
http://jsbin.com/yexine/2/edit	http://jsbin.com/yexine/8/edit
Sortable.create(listA, { group: { name: 'shared', pull: 'clone', put: false } }); Sortable.create(listB, { group: { name: 'shared', put: false } }); Sortable.create(listC, { group: 'shared' });	Sortable.create(listA, { group: { name: 'A', pull: 'clone' } }); Sortable.create(listB, { group: 'B' }); Sortable.create(listC, { group: { put: ['A', 'B'] } });

アニメーション

ここでペイントする特別なものはありません。アニメーションは非常にシンプルで、CSS3トランジションを使用します。オプション `animation` in` ms`を設定することで有効にできます。 残念ながら、まだ解決されていない欠陥がありますが、将来、それらを「安く」修正する方法があることを願っています。
http://jsbin.com/yexine/4/edit

スマートスクロールウィンドウとリスト

ごく最近、タスクが発生しました：エッジの1つに達したときにウィンドウをスクロールします。 理論的には、これはデフォルトで機能するはずです。 Native Drag'n'Drop APIが使用されますが、実際には、ブラウザはウィンドウをスクロールすることに非常に消極的でした。 リストがオーバーフローしている場合にも問題がありました。 したがって、考えてみると、スマートスクロールを行うことが判明しました。オーバーフローした場合はリストをスクロールし、ブラウザの端に達した場合はウィンドウをスクロールします。 さらに微調整するために、3つの追加オプションが導入されています。

• scroll-自動スクロールを有効にします。
• scrollSensitivity-スクロールを有効にするためにエッジにどれだけ近づく必要があるか。
• scrollSpeed- 「px」でのスクロール速度。

例：

• 長いリスト： http : //jsbin.com/boqugumiqi/1/edit?html,js,output
• オーバーフロー： http : //jsbin.com/kohamakiwi/1/edit?html,js,output

並べ替えを無効にする

はい、正確には、奇妙に思えるかもしれませんが、このパラメーターを使用すると、このツールの作成対象を無効にできます。]たとえば、ドラッグ可能およびドロップ可能をシミュレートするために使用できます。 ？html、js、出力

ソートの取得および変更方法

このライブラリは、Drag'n'Drop APIの機能を調査した結果として登場したため、順序を取得したり変更したりするための簡単なメソッドは単純に配置されていませんでした。 jQueryUI APIを見て、要素の順序のみを取得できることがわかりましたが、変更することはできません。順序ではありません。]これらすべての問題を解決するために、2つのパラメーター `get`と`並べ替えの受信と保存、および2つのメソッド「toArray」と「sort」を設定します。

たとえば、 `localStorage`による順序の維持は次のようになります。

 Sortable.create(users, { store: { //   (  ) get: function (sortable) { var order = localStorage.getItem(sortable.options.group); return order ? order.split('|') : []; }, //   (     ) set: function (sortable) { var order = sortable.toArray(); localStorage.setItem(sortable.options.group, order.join('|')); } } }); 

http://jsbin.com/yexine/7/edit （ページの並べ替えと更新）

フィルタリング能力

アイテムを編集および削除できるソート可能なリストを作成する必要があるとします。 以前は、必要なハンドラーを個別にアタッチする必要がありました。 これで、追加のツールなしで、ライブラリ自体を使用して同様の問題を解決できます： http : //jsbin.com/yexine/6/edit?html,js,output

AngularJSサポート

Angularはますます市場シェアを獲得しており、人々がSortableを使いやすくするために、プロジェクトへの迅速な統合を指示することが決定されました。 アナログを見ると、奇妙なことがわかりました。

 <ul ui-sortable="sortableOptions" ng-model="items"> <li ng-repeat="item in items">{{ item }}</li> </ul> 

なんで？ 結局のところ、これは単にコピーアンドペーストであり、完全に正直に言うと松葉杖です。 私の意見では、次のエントリは論理的で正しいものであり、「ng-model」はありません。

 <ul ng-sortable="sortableOptions"> <li ng-repeat="item in items">{{ item }}</li> </ul> 

関心のあるデータにはすでに「ng-repeat」が含まれています。それらを取得するには、「$ parse」関数と少しのトリックが必要です。 秘Theは、「ng-repeat」からのデータは仕様を見つけることによってのみ取得できるということです。 アングル自身が残したコメント：

 <ul ng-sortable="{ animation: 150 }"> <!-- ngRepeat: item in items --> <!-- end ngRepeat: item in items --> </ul> 

これで、 `ng-repeat`に関連するデータを操作するメソッドを作成できます。

 /** *        ng-repeat * @param {HTMLElement} el * @returns {object} */ function getNgRepeat(el) { //   `scope`    var scope = angular.element(el).scope(); //     var ngRepeat = [].filter.call(el.childNodes, function (node) { return ( (node.nodeType === 8) && (node.nodeValue.indexOf('ngRepeat:') !== -1) ); })[0]; //       ngRepeat = ngRepeat.nodeValue.match(/ngRepeat:\s*([^\s]+)\s+in\s+([^\s|]+)/); //     `expression`      `scope` var itemExpr = $parse(ngRepeat[1]); var itemsExpr = $parse(ngRepeat[2]); return { //     item: function (el) { return itemExpr(angular.element(el).scope()); }, //     `ng-repeat` items: function () { return itemsExpr(scope); } }; } 

作業例： http : //jsbin.com/fumote/1/edit
完全なディレクティブコード： https : //github.com/RubaXa/Sortable/blob/master/ng-sortable.js

Meteorとの統合

これはまったく新しい機能であり、 Dan Dascalescuのおかげで登場しました。 したがって 、meteorを使用すると、ライブラリが雰囲気に追加され、Danは使用のための詳細なマニュアルと例を追加しました。 どちらかと言えば、流星タグを付けたタスクを置くと、喜んで手伝います;]


結論として、ライブラリのテストと開発に携わったすべての人々に感謝します。たとえそれが少し「脂肪」になったとしても、それは同じ簡単で柔軟なツールです。 ご清聴ありがとうございました。

今後の計画

• テストの適用範囲（ドラッグアンドドロップを適用する方法はまだ完全には明確ではありませんが、アイデアはあります）
• 強化されたアニメーション
• 拡張システム（たとえば、ネストされたリストまたは2つの要素を1つに結合する）
• 軸の制限（また、Drag'n'Drop APIを放棄する必要がある場合があります）
• あなたのオプション ;]

例 | コードとドキュメント | 私のgithub | しゅう