Angular CLIを使用してプロジェクトにng2-draggableモジュールを追加するには

Question

Angular CLIを使用しており、プロジェクトにng2-draggableライブラリを追加しますか？ npmを実行してng2-draggableを実行し、ライブラリからDraggableModuleをインポートしたい場合は、IDEにDraggableModuleがありません。

動作させるには他に何かをしなければなりませんか？

Answer 1

あなたはこれを意味しますかhttps://github.com/cedvdb/ng2draggable？

これが意味することは、前にnpmで間違ったバージョンを公開して、正しいバージョンをアップロードしたことだけです。

は

npm install ng2draggable 

それともディレクティブでdraggable.directive.tsファイルの内容をコピーをインストールします。

いずれの場合も、モジュールにディレクティブを追加する必要があります。

'{ng2draggable/draggable.directive'から{Draggable}をインポートします。それだ

@NgModule({ 
    declarations: [ 
    ..., 
    Draggable 
    ],...}) 

使用

<div [ng2-draggable]="true"></div> 

！今あなたのコンポーネントを移動することができます。

あなたは同様にそれを無効にすることができますカーソルドラッグ：

<div [ng2-draggable]="false"></div> 

コンポーネントは、カスタムクラスは同様にそれに追加されます。あなたはそれをcostumizeすることのCSSを使用することができます。

/* Applies a grabbing hand on top of the div that's draggable*/ 
.cursor-draggable { 
    cursor: grab; 
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
} 
/* Apply a "closed-hand" cursor during drag operation. */ 
.cursor-draggable:active { 
    cursor: grabbing; 
    cursor: -moz-grabbing; 
    cursor: -webkit-grabbing; 
} 

ブール入力はクラスが削除されます（これはデフォルトではtrueである）偽でないとコンポーネントは、もはや移動可能です。

画像

ドラッグの成分の子供の画像がある場合は、それに「偽」=ドラッグ可能なHTML5のプロパティを追加してください。このプロパティはドラッグアンドドロップの状況で使用され、ng2draggableディレクティブはさまざまな理由でそのプロパティに基づいていないため、コンポーネントを予期せず動作させる可能性があります。