用アンギュラドラッグアンドドロップI Iは、ユーザーが/リストとドラッグからオブジェクトを選択し、特定のスロットにドロップできるようにする必要があり、次のような状況があります。組み合わせるAngularJS、jQueryUI、ソートされたリスト
をオブジェクトは、スロットの1〜3倍のサイズにすることができます。したがって、ユーザーがオブジェクト1をスロット0にドラッグすると、スロット0(startSlot = 0およびendSlot = 0)のみを占有します。しかし、ユーザーがオブジェクト3をスロット3にドラッグすると、スロット3,4,5(startSlot = 3およびendSlot = 5)を占有します。
オブジェクトをスロットにドロップすると、オブジェクトをクリックしてスロット内で上下にドラッグすることで、オブジェクトの順序を変更できます。オブジェクトは、互いに重複することはできません。
私は角使用していますので、私は、データベースからオブジェクトのリストを読んでいると私はスロットの数のための変数を持っています。私はいくつかの解決策を試みました。私は、ドラッグドロップ可能jQueryとjQueryUIの使用を信じて、そしてソート可能はソリューションの一部で、ここではドラッグ/ドロップとソート可能性を示す最初のフィドルは次のとおりです。
http://jsfiddle.net/mduvall216/6hfuzvws/4/
このフィドルの問題は、私はセットを必要とするということですスロット数。オブジェクトがスロットに配置されると、オブジェクトのサイズに応じて1〜3つのスロットが置き換えられます。下の2番目のバイオリンはAngularJSを統合:
http://jsfiddle.net/mduvall216/zg5x4b6k/4/
ここでの問題は、私は私が一度オブジェクトリストからドラッグして、オブジェクトをスナップするグリッドのいくつかのタイプを必要と知っていることです。私が探している結果は、それらの割り当てられたスロット内のオブジェクトのJSONリストである:
[{ID:OBJ1、startSlot:0、endSlot:0}、{ID:OBJ3、startSlot:3、endSlot :5}]
私も解決策がここにありcodf0rmerの角度ドラッグ&ドロップが必要になると確信している:
https://github.com/codef0rmer/angular-dragdrop
しかし、私はそれをテストするために私のバイオリンに統合取得しようとして問題を抱えています。これは私がしばらくの間旋回してきた面白い挑戦です。もし誰でも援助を受けることができれば大いに感謝します。御時間ありがとうございます。
一般的なAngularUIスイートの一部であるhttps://github.com/angular-ui/ui-sortableをご覧ください。彼らは接続されたリストをサポートしていますが、あなたのアイテムサイズの要件は、おそらくリスト項目の顧客の扱いを必要とするでしょうが、イベントを使用するときは直感的でなければなりません。私は前にプロジェクトの中でうまく使用しました。残念ながら、私は今あなたの特定の要件を調べる時間がありません。 – Beyers
HTML 5ドラッグ&ドロップAPIを使用してカスタムモジュールを作成することもできます。その実装は非常に簡単です。 – malinkody