CODEWITHSUNDEEP
angularng2-dragula
khalil _diouri
khalil _diouri

Reputation: 821

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

http://akserg.github.io/ng2-webpack-demo/#/dnd this is a demo for this drag&drop using angular2 so how can I affect my class css to indicate that this zone is the droppable zone

enter image description here

this is a part of code from github source project

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

how can I affect my class to this line this._elem.classList.add(this._config.onDragEnterClass);

Upvotes: 1

Views: 4821

Answers (2)

Hudson Tavares
Hudson Tavares

Reputation: 161

The dnd-droppable will receive the dnd-drag-over CSS class while there is a draggable over it. You may try providing styles for it instead of utilising TypeScript, e.g.

/* 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;
    }
}

The complete list of classes can be found on the DragDropConfig class.

Upvotes: 2

martin
martin

Reputation: 96999

You can see it emits onDragEnter event so you need to subscribe to it.

For example:

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

Then inside myEventHandler() you can do whatever you want.

By the way, you could also use something like this without any extra methods:

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

Upvotes: 5

Related Questions