Reputation: 821
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
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
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
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