Question

我在我的angular2应用程序中实现拖放功能，其工作原理如下......用户可以看到他们可以选择的选项列表以及列表上方的放置区域 - 当他们从一个拖动时将选项放入放置区，然后处理事件。

到目前为止，我有一个可拖动的指令来处理拖动启动事件，并在事件的dataTransfer属性上设置一些数据。我试图做的是创建另一个指令，它是一个dropTarget指令，它只处理drop事件并抓取数据。

这是可以做的吗？我是否可以更好地为可拖动的div和drop zone使用相同的指令，并插入一些逻辑，只允许在div放在正确的目标上时发生drop事件。

谢谢

编辑：代码

以下是我的draggable指令的代码：

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[myDraggable]',
    host: {
        '(dragstart)': 'onDragStart($event)',
        '(dragover)': 'onDragOver($event)',
        '(dragleave)': 'onDragLeave($event)',
        '(dragenter)': 'onDragEnter($event)',
        '(drop)': 'onDrop($event)'
    }
})
export class DraggableDirective {

    constructor(el: ElementRef) {
        el.nativeElement.setAttribute('draggable', 'true');
    }

    onDragStart(ev: DragEvent) {
        console.log("Drag Started");
        ev.dataTransfer.setData('Text', 'Data from drag start');
    }

}

这是拖动目标指令代码：

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[dragTarget]',
    host: {
        '(dragover)': 'onDragOver($event)'
    }
})
export class DragTargetDirective {

    onDragOver(ev: DragEvent) {
        console.log("dragged over target" + ev.dataTransfer.getData('Text'));
    }

}

最后这里是包含两个指令的html

<div class="relativeContainer">
    <div class="absoluteBox" *ngFor="let process of processes" [ngClass]="{'active': process.active}">
    <div class="process-title">{{process.stage}} - {{process.name}}</div>
    <div dragTarget *ngIf="process.options" class="process-selection">{{process.options[process.selectedOption]}}</div>
    <ul class="option-list">
        <li myDraggable *ngFor="let option of process.options" class="option-item"><p>{{option}}</p></li>
    </ul>
</div>

我还拥有导入并在此处声明指令的组件的元数据

import {DraggableDirective, DragTargetDirective} from '../draggable';

@Component({
    templateUrl: 'app/dashboard/dashboard.component.html',
    styleUrls: [require('./dashboard.component.scss')],
    directives: [DraggableDirective, DragTargetDirective]
})

Answer 1

我以为我来完成这个问题 - 我使用了错误的事件处理函数 - 尝试从dragover上的事件中获取数据是我不打算做的事情。

ondrop功能是正确使用的功能，并且完全符合我的期望。

Angular2拖放目标

1 个答案: