ng2-dnd 拖动时如何使用 class css dragOver dropOver for angular2

Question

http://akserg.github.io/ng2-webpack-demo/#/dnd 这是使用 angular2 进行拖放的演示那么我怎样才能影响我的 class css 以指示该区域是可投放区域

这是 github 源项目

的一部分代码

 _onDragEnterCallback(event: MouseEvent) {
     if (this._dragDropService.isDragged) {
         this._elem.classList.add(this._config.onDragEnterClass);
         this.onDragEnter.emit({dragData: this._dragDropService.dragData, mouseEvent: event});
     }
 }

如何影响我的 class 这条线 this._elem.classList.add(this._config.onDragEnterClass);

Answer 1

您可以看到它发出 onDragEnter 事件，因此您需要订阅它。

例如：

<div dnd-draggable
    [dragEnabled]="true"
    [dropZones]="['zone1']"
    (onDragEnter)="myEventHandler($event)">

然后在里面 myEventHandler() 你可以做任何你想做的事情。

顺便说一句，你也可以使用类似这样的东西而无需任何额外的方法：

<div dnd-draggable
    [class.highlighted]="highlightMe"
    [dragEnabled]="true"
    [dropZones]="['zone1']"
    (onDragEnter)="highlightMe=true"
    (onDragLeave)="highlightMe=false">

Answer 2

dnd-droppable 将收到 dnd-drag-over CSS class 当它上面有一个 draggable 时。您可以尝试为其提供样式而不是使用 TypeScript，例如

/* Utilising SCSS on this example */
.my-droppable {
    border: 1px solid #000;
    &.dnd-drag-over {
      /* Changes the border color while a draggable hovers it */
      border-color: #ccc;
    }
}

完整的 class 列表可以在 DragDropConfig class.

上找到

ng2-dnd 拖动时如何使用 class css dragOver dropOver for angular2

ng2-dnd how use class css when drag dragOver dropOver for angular2

ng2-dragula

angular