2016-10-26 2 views
1

私は、HTML要素をドラッグして画面上の任意の場所に配置できるようにするパッケージまたはモジュールを探していました。どちらが私のニーズの2欠けている角2ドラッグアンドドロップインターフェイス

  1. https://github.com/valor-software/ng2-dragula

  2. https://github.com/akserg/ng2-dnd

:画面上の現在位置を取得することができるようにする(X

は、私が2つのパッケージを見つけました& Y)、および画面上の任意の場所に要素をドラッグアンドドロップすることができます。

私はHTML Drag and Drop APIがあることを知っています。

私がまさに必要とすることは誰でもどこでもアイテムをドラッグ&ドロップすることができるようにドラッグ&ドロップ・インタフェースを作るために2角度で作業することができます任意のモジュールに私を指すことができAndroid drag and dropだけアンギュラ2.

のためであります位置を保存しますか?

答えて

0

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構造に非常に敏感になるということです。もし要素が相対/絶対位置決め要素の階層内にある場合、物事が正常に動作しない場合があります、あなたが取ることができる

+0

私はこの問題を扱うことができますが、Angular 2のマウスイベントをネイティブに処理する方法を理解したいと思います。そのようなサンプルから学ぶことは素晴らしいことです。 – Reni

0

一つの方向では、マウスイベントをサブスクライブrxjsの観測に基づいて独自のバージョンを実装することです。あまりにも多くの仕事をしてはいけません。それはrxjsでも同様に立ち上がる素晴らしいプロジェクトとして役立つかもしれません。

フォールバックとして、常にjQueryドラッグ可能なものがあります。ここで

http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

は同様にそれの迅速なデモです:

http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery

ことができます場合、私はここ2角度でドラッグ可能にjQueryを統合する方法の例を持っているいずれにしても

+0

私は本当にrxjsで作業したいです。あなたはrxjsを使ってマウスイベントに入ることができる出発点に向かうことができますか? – Reni