角度2（v2.0.0-beta.15）を使用してドラッグアンドドロップを実装する方法

Question

角度の単純なドラッグnドロップリストを実装したいと思います。例えば、その注文を変更できる食料品リストです。

Ivはhttps://github.com/akserg/ng2-dndを使用する前にそれを実装しましたが、私の問題は角度2.0.0-beta.15を使用しています。現在このバージョンをサポートしているものを見つける必要があるためです。 Ivはこのライブラリの特定のコミットを検索しようとしましたが、私のverには適合しません。私はその正確な行動が必要です。 the more specific example of this library is。たぶん誰かが何とか私は自分でそれをやることができると知っている、とにかく良い、時間を節約するためにいくつかのライブラリを好む。

（イム使用してtypescriptです）

場合がリストの並べ替えのために他の方法で、他のいくつかのソリューションを持って、あまりにも祝福される例を与えることができる人。

Answer 1

：あなたはカスタム実装との契約をしない場合は、このリストからいくつかのライブラリを使用することができます

最初に答えた人のおかげです。

ほとんど私がNG2-DNDとしていた問題が解決する方法だった私を助け答え：私はちょうどdevDependenciesに追加

を：

"ng2-dnd" : "1.5.0" 

実行npm install、私は行くことによかったですgithubの例のようにライブラリを使用してください。

Answer 2

Dragula 2 Github repoの特定のリビジョンを使用できます。

1からpackage.jsonを開き、"dependencies"

2までスクロール - ng2-dragulaを削除する - 彼らは

"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007" 

3をRC.1に切り替える前に、最後のコミットとのGithubリンクにng2-dragulaパッケージを編集しますnode_modulesのフォルダとして、あなたのpackage.jsonから再インストール

npm install 

Answer 3

Angular 2を使ってドラッグ＆ドロップを可能にする最も一般的な方法は2つあります。まず、角度ベースのオープンソースライブラリの1つを使用しています（いくつかあります）。 2番目はjQuery UIライブラリをドラッグアンドドロップで使用しています。いくつかの調査の後、私はそれらのほとんどがAngular 1.xのために作られていることがわかりましたが、私が必要とするすべての機能をまだサポートしていません。

私は、TypeScriptライブラリを使用してjQueryを使用してドラッグアンドドロップの実装を行うことに決めました。

ドラッグをサポートするには、jQuery JavaScriptファイルをプロジェクトに、index.htmlをファイルに追加してドロップを開始します。 Angular + TypeScriptプロジェクトで使用する前にjQueryファイルを取得した後は、ドラッグ＆ドロップのタイプ固有の実装を与えるjquery.d.tsとjqueryui.d.tsが必要です。

ステップ1

プロジェクトのルートディレクトリで次のコマンドを実行します。ここに示すように、上記のコマンド

// install tsd 
npm install tsd -g 
// install jquery.d.ts 
tsd install jquery --save 
// install jqueryui.d.ts 
tds install jqueryui --save 

は、プロジェクトのフォルダを入力するにはjQueryのためのタイプ固有のマッピングをインストールします。

• 成分はなりドロップ可能容器
• コンポーネント内滴下することを可能にするいくつかのコンテナ：

  

  ステップ2

  ドラッグアンドドロップは、実装するための2つの側面を有していますドラッグすることができますdraggableコンポーネント

私の実装では、ボードスクエアはドロップ可能で、ピースはドラッグ可能で、2つの間にドラッグすることができます。これをサポートするために、既存の正方形（htmlテンプレート）を作成してCSSクラスdroppable-squareを追加します。これは、後で正方形のドロップ可能にするために使用されます。そして、CSSクラスdraggable-pieceを追加して、チェスのピースをドラッグ可能にします。

<div *ngFor="let files of Board.Files, let i = index"> 
    <div class="board-square droppable-square" *ngFor="let rank of Board.Ranks, let j = index" [style.background]="Board.Squares[7-i][j].IsWhite ? '#FECE9E': 'D18B46'"> 
    <span class="square-name">{{Board.Squares[7-i][j].SquareId}}</span> 
    <div *ngIf="Board.Squares[7-i][j].Piece" class="piece draggable-piece"></div> 
    </div> 
</div> 

ドラッグとドロップ可能を実現するためのステップ3

は、作品を可動させるためのロジックを持っているPieceMoverという名前の新しいクラスを作成しました。次のコードベースに示すように、上記のCSSクラスはdraftable &をドロップ可能にし、ピースを四角形の外側ではなく、四角形の上にドロップするように制限します。ドラッグ・ドロップ処理中にボーダーを表示する追加のロジックはほとんどありません。

依存性の注入 - 角度2

依存性の注入は、C＃などの任意の豊富なサーバーサイドの開発言語としてアンギュラ2の最も貴重な機能の一つであり、Javaは依存関係をサポートするためにIoCコンテナを持つことができます同様に、角度2はDIを可能にする。 Dependency Injectionは、クラス間の依存関係を切り離し、モジュール開発をサポートします。クラスの上のPieceMoverクラスコードに見られるように、@Injectable()で装飾されています。これは、角度2のDIコンテナにこのクラスが注入可能であることを示します。 PieceMoverクラスコードの1行目の注入可能なインポートにも注意してください。

このケースではBoardComponentであるコンシューマクラスは、Angular 2 DIコンテナで解決する必要がある特定の依存関係に "providers"配列を使用します。コンストラクタはDIで注入/解決されるタイプPieceMoverのパラメータをとります。上記のように依存関係を解決した後、ボードBoardComponentを表示した後、メソッドMakePiecesMovable()を呼び出します。これにより、部分がチェスの四角に移動します。

UPD：

• ng2-draggable
• ng2-dragula