angular - ng2-dnd在为angular2拖动dragOver dropOver时如何使用类css

Question

http://akserg.github.io/ng2-webpack-demo/#/dnd 这是一个使用 angular2 进行拖放的演示，所以我如何影响我的类 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});
     }
 }

我怎样才能影响我的课到这条线 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-overCSS 类，同时有一个可拖动的对象。您可以尝试为其提供样式而不是使用 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;
    }
}

完整的类列表可以在DragDropConfig 类中找到。