AngularJSのドラッグアンドドロップは、ネイティブレベルではサポートされていません。現在利用できるのは、jQueryUIラッパーだけです。
HTML5 DragAndDropはカウントされません-私はフロントエンドソリューションについて話しています。 ドラッグ可能、ドロップ可能、回転可能、サイズ変更可能な要素-これらはそのコンポーネントです。
しばらくの間、私はこの問題について考え、スーパーヒーローのAngularJSコミュニティの貯金箱に小さな貢献をすることにしました。
これ以上苦労せずに、長い間名前を考えないで、私は私の頭脳を提示します: AngularDND 。
デモへのリンク: urplanet.net/angular-dnd/demo/basic.html
githubへのリンク: github.com/Tuch/angular-dnd
バージョン0.1.0の機能:
- 非jQueryUIラッパー
- タッチイベントのサポート
ディレクティブ:
- dnd-draggableアイテムを移動する機能を提供します
- dnd-droppableドラッグ可能な要素に応答するドロップ可能な要素を定義します
- dnd-rotatable要素を回転させる機能を提供します
- dnd-resizable要素のサイズを変更する機能を提供します
- dnd-rectディレクティブ。座標とサイズを記述する要素のモデルです(デフォルトは上、左、幅、高さです)。 dnd-draggable、dnd-resizable、dnd-rotatable、dnd-fittext、dnd-selectableの各ディレクティブは、dnd-rectと連動して機能します。
- dnd-modelドラッグ可能/ドロップ可能オブジェクトのモデルを含むディレクティブ(例を参照)
- 投げ縄ツールを使用して長方形モデルを作成するためのdnd-lasso-areaディレクティブ(例を参照)
- オブジェクトを選択するためのdnd-selectableディレクティブ。 選択ツールとして、なげなわが使用されます(例を参照)
- dnd-fittextこのテキストが配置されているブロックサイズ(サイズ変更可能な要素に便利)にテキストを合わせるための優れたディレクティブ。 この関数は、四角形を含む唯一の引数としてrectオブジェクトを取り、これらのパラメーターに基づいてフォントの高さが計算されます。 このディレクティブは、追加の構成属性dnd-fittext-maxおよびdnd-fittext-minもサポートしています。これらを使用すると、それぞれフォントの最大値と最小値をピクセル単位で設定できます。
サービス:
- 同じ名前の長方形のなげなわツールへのインターフェイスのディレクティブを提供するように設計されたDndLassoサービスクラス
jQuery拡張機能:
- jQuery.fn.dndBindドラッグアンドドロップイベントと対話するためのインターフェイスを整理できるメイン関数。 jQuery.fn.bindの原理で動作します
- jQuery.fn.dndUnbindはjQuery.fn.Unbindの原理に基づいて動作します
TODO:
- ドキュメントを英語に翻訳する