plnkr sample。それは基本的なものであり、レイアウトの問題を多く残していますが、あなたが望むものを示しています.DraggableとMovableは別々です。
基本的な使い方は次のとおりです。
<div class="note" draggable movable #m1="movable" (movement)="m1.move($event)">movable note a </div>
私はあなたがthis postは最高の出発点である、rxjsについて尋ねました。
============================================== ===============
dragulaは素晴らしいですし、スムーズに動作しますが、あなたが言ったように、あなたのニーズに適合していません。
DND APIは、要素の相互作用のため、より精巧な一つであり、(最も近代的なWebアプリケーションでのファイルアップロードを考える)の相互作用を実装するために、別の上に一つの要素をドラッグすることができます。これは、ドラッグの受け入れと拒否(ターゲットのドロップ)と、ドラッグされた要素でのデータの受け渡しをサポートします。
ドラッグ可能なディレクティブはangular2で実装するのはかなり簡単で、〜コードの30行を取る必要があります。私は1つを実装し、必要な場合は要点のコードの概要を共有することができます。
主な問題は、画面上に項目を配置する方法です。これを行うには、絶対位置を使用し、レイアウト構造を破損する可能性があります。これは、あなたのアプリで受け入れられるものですか?私がこれを言う理由は、あなたがあなたのhtml構造に非常に敏感になるということです。もし要素が相対/絶対位置決め要素の階層内にある場合、物事が正常に動作しない場合があります、あなたが取ることができる
私はこの問題を扱うことができますが、Angular 2のマウスイベントをネイティブに処理する方法を理解したいと思います。そのようなサンプルから学ぶことは素晴らしいことです。 – Reni