更改拖動的dropEffect

Question

我正在使用使用默認HTML5 dnd api的ngx拖放 。

我有一個對象列表，當我移動它們時，我的事件和放置效果的類型為"copy"我試圖找到一種使該事件成為"move"因為拖放操作應該是什么是的，我希望觸發我的OnMove事件

開始拖動時嘗試更改

  onDragStart(event:DragEvent, card:KanbanCard) {
    event.dataTransfer.dropEffect = "move";
    event.preventDefault();
} 

但這行不通

<div class="kanban-column-container">
<p class="title"><strong>{{column.name}}</strong></p>
<button mat-button (click)="addCard();">Add Card</button>
<div class="list"  
dndDropzone
(dndDrop)="onDrop($event)">
    <!-- PLACEHOLDER for drag & drop. Removed on DOM LOAD AUTOMATICALLY -->
    <div class="card-placeholder" dndPlaceholderRef>
        placeholder
    </div> 

    <div *ngFor="let card of _cards"
    [dndDraggable]="card"
    (dndEffectAllowed)="move"
    (dndStart)="onDragStart($event, card)"
    (dndCanceled)="onDragCanceled($event, card)"
    (dndMoved)="onMoved($event)"
    (dndEnd)="onDragEnd($event, card)"
    [hidden]="card.hidden">
        <kanban-card-component [card]="card"></kanban-card-component>
    </div>
</div> 

Answer 1

基本上你做錯了。 首先，假設它是[]而不是（），因為它不是一個函數。 如果想輸入一個值，它就會像放置對象和對象一樣消耗很多，因此這種方法將起作用。

<div class="kanban-column-container">
<p class="title"><strong>{{column.name}}</strong></p>
<button mat-button (click)="addCard();">Add Card</button>
<div class="list"  
dndDropzone
(dndDrop)="onDrop($event)">
    <!-- PLACEHOLDER for drag & drop. Removed on DOM LOAD AUTOMATICALLY -->
    <div class="card-placeholder" dndPlaceholderRef>
        placeholder
    </div> 

    <div *ngFor="let card of _cards"
    [dndDraggable]="card"
    [dndEffectAllowed]="'move'" <-- like this
    (dndStart)="onDragStart($event, card)"
    (dndCanceled)="onDragCanceled($event, card)"
    (dndMoved)="onMoved($event)"
    (dndEnd)="onDragEnd($event, card)"
    [hidden]="card.hidden">
        <kanban-card-component [card]="card"></kanban-card-component>
    </div>
</div>