2016-11-30 53 views
0

我正在使用Angular CLI並希望將庫ng2-draggable添加到我的項目中?當我執行npm install ng2-draggable然後想要從庫中導入DraggableModule時,它在IDE中找不到。如何使用Angular CLI將ng2-draggable模塊添加到我的項目中

我還得做點別的才能讓它工作嗎?

+0

您應該閱讀如何將第三方庫添加到Angular CLI項目中。 https://github.com/angular/angular-cli#3rd-party-library-installation – Baruch

回答

0

你的意思是這個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> 

組件將具有添加自定義類也將可以:光標拖動。然後,您可以使用CSS來costumize它:

/* 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指令因各種原因不基於該屬性,因此可能會使組件出現意外情況。

相關問題