如何将NG2-拖放模块添加到使用角CLI的项目中？

Question

我正在使用角CLI，并想要添加库NG2-拖动到我的项目？当我执行npm安装NG2-可拖，然后想从库导入DraggableModule时，在IDE中找不到它。

我还得做点别的事才能让它起作用吗？

Answer 1

你是说这个https://github.com/cedvdb/ng2draggable吗？

如果这就是你的意思，我之前在npm上发布了一个错误的版本，只是上传了正确的版本。

安装

  npm install ng2draggable

或者只需在指令中复制draggable.directive.ts文件内容。

无论如何，您需要将指令添加到模块中。

从‘ng2draggable/draggable.指令’导入{ Draggable }；

@NgModule({
  declarations: [
    ...,
    Draggable
  ],...})

使用

<div [ng2-draggable]="true"></div>

就这样!现在您的组件可以四处移动了。

您也可以禁用它：

<div [ng2-draggable]="false"></div>

该组件还将添加一个自定义类:游标拖放。然后，您可以使用该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="false“。此属性用于拖放情况，而且由于各种原因，ng2draggable指令不基于该属性，允许它进入可能会使组件意外地运行。