更改拖动的 dropEffect答案

【问题标题】：change the dropEffect of a drag更改拖动的 dropEffect
【发布时间】：2018-11-10 05:15:16
【问题描述】：

我正在使用ngx drag and drop，它使用的是默认的 HTML5 dnd api。

我有一个对象列表，当我移动它们时，我的事件和拖放效果类型为"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>

【问题讨论】：

标签： javascript angular drag-and-drop

【解决方案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>

【讨论】：