ng2-dnd如何在为drag2拖动dragOver dropOver时使用class 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

dnd-droppable将收到dnd-drag-over CSS类，同时在其上有可拖动对象。您可以尝试为其提供样式，而不是利用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 class上找到。