如何使用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文件内容。

在任何情况下，您都需要将指令添加到模块中。

从＆ng; ng2draggable / draggable.directive＆＃39;;

导入{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;
}

当布尔输入为false（默认情况下为true）时，将删除该类，并且该组件不再可移动。

图片

如果拖动组件的子项中有图像，请确保添加HTML5属性draggable =＆＃34; false＆＃34;它。此属性用于拖放情况，并且由于ng2draggable指令由于各种原因而不基于该属性，因此将其置于可能会使组件出现意外行为。