Angular5 与 HTML5 拖放答案

【问题标题】：Angular5 with HTML5 Drag and DropAngular5 与 HTML5 拖放
【发布时间】：2018-08-24 00:02:54
【问题描述】：

我尝试在 Angular5 组件中使用 HTML5 拖放。我必须把我的函数放在哪里才能让它工作？

HTML 示例：

<div class="itemBox">
    <div *ngFor="let count of this.modul.getSemesterCollums(input.maxKlausur)" id="{{ count }}" class="semesterBox" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        <a *ngFor="let item of this.modul.getArray(); let i = index">
          <div *ngIf="item.getIDSemesterInt(input.maxKlausur, this.i) == (count + 1)" id="{{ item.getName() }}" class="item" draggable="true" ondragstart="drag(event)">
                <p>{{item.getName()}}</p>
            <hr/>
                <ul>
                    <li>Übung: {{item.getUebungen()}}</li>
                    <li>Klausur: {{item.getKlausur()}}</li>
                    <li>Semester: {{item.getSemester()}}</li>
                    <li>Bestanden: <i class="fa fa-times"></i></li>
                </ul>
            </div>
        </a>    
    </div>
</div>

Javascript 示例：

function allowDrop(ev) {
    ev.preventDefault();
    if (ev.target.getAttribute("draggable") == "true")
        ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
    else
        ev.dataTransfer.dropEffect = "all"; // drop it like it's hot
}

它不会在component.ts中找到它，也不会在component.html中的“”标签中找到它。

感谢您的宝贵时间:)

【问题讨论】：

如果你做一个 js fiddle，我可能会帮忙

标签： javascript html angular angular5

【解决方案1】：

修复它。

在导出类中插入函数：

export class DropComponent {
    allowDrop(ev) {
        ev.preventDefault();
        if (ev.target.getAttribute("draggable") == "true")
            ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
        else
            ev.dataTransfer.dropEffect = "all"; // drop it like it's hot
    }
    [.....]
}

我将 HTML 编辑如下：

<div class="itemBox">
<div *ngFor="let count of this.modul.getSemesterCollums(input.maxKlausur)" id="{{ count }}" class="semesterBox" (drop)="drop($event)" (dragover)="allowDrop($event)">   
    <a *ngFor="let item of this.modul.getArray(); let i = index">
      <div *ngIf="item.getIDSemesterInt(input.maxKlausur, this.i) == (count + 1)" id="{{ item.getName() }}" class="item" draggable="true" (dragstart)="drag($event)">
            <p>{{item.getName()}}</p>
        <hr/>
            <ul>
                <li>Übung: {{item.getUebungen()}}</li>
                <li>Klausur: {{item.getKlausur()}}</li>
                <li>Semester: {{item.getSemester()}}</li>
                <li>Bestanden: <i class="fa fa-times"></i></li>
            </ul>
        </div>
    </a>    
</div>
</div>

它就像一个魅力:)

【讨论】：