如何使用Angular CLI將ng2-draggable模塊添加到我的項目中

Question

我正在使用Angular CLI，並想將ng2-draggable庫添加到我的項目中？ 當我執行npm安裝ng2-draggable，然后想要從庫中導入DraggableModule時，在IDE中找不到它。

我是否需要做其他事情才能使其正常工作？

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>

該組件還將添加一個自定義類：cursor-draggable。 然后，您可以使用該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屬性draggable =“ false”。 此屬性用於拖放情況，並且由於各種原因，ng2draggable指令不是基於該屬性的，因此將其放進去可能會使組件的行為異常。