1

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);

4

2 に答える 2

5

イベントを発行していることがわかる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">
于 2016-08-16T09:19:19.307 に答える