如何使用Angular CLI将ng2-draggable模块添加到我的项目中

Question

我正在使用Angular CLI并希望将库ng2-draggable添加到我的项目中？当我执行npm install 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> 

组件将具有添加自定义类也将可以：光标拖动。然后，您可以使用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指令因各种原因不基于该属性，因此可能会使组件出现意外情况。