我正在使用Angular CLI並希望將庫ng2-draggable添加到我的項目中?當我執行npm install ng2-draggable然後想要從庫中導入DraggableModule時,它在IDE中找不到。如何使用Angular CLI將ng2-draggable模塊添加到我的項目中
我還得做點別的才能讓它工作嗎?
我正在使用Angular CLI並希望將庫ng2-draggable添加到我的項目中?當我執行npm install ng2-draggable然後想要從庫中導入DraggableModule時,它在IDE中找不到。如何使用Angular CLI將ng2-draggable模塊添加到我的項目中
我還得做點別的才能讓它工作嗎?
你的意思是這個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指令因各種原因不基於該屬性,因此可能會使組件出現意外情況。
您應該閱讀如何將第三方庫添加到Angular CLI項目中。 https://github.com/angular/angular-cli#3rd-party-library-installation – Baruch