Angular 2拖放答案

【问题标题】：Angular 2 drag & dropAngular 2拖放
【发布时间】：2017-06-12 21:03:38
【问题描述】：

我的 Angular 2 项目的 index.html 中有这些函数：

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", "teststring");
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    console.log(data);
}
</script>

当我将函数放入组件中时，会出现以下错误：

Uncaught ReferenceError: drag is not defined at HTMLImageElement.ondragstart
Uncaught ReferenceError: allowDrop is not defined at HTMLDivElement.ondragover

使用函数的元素在组件html中：

<div> ondrop="drop(event)" ondragover="allowDrop(event)">
    <img> src="smiley.png" draggable="true" ondragstart="drag(event)">
</div>

<div ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

【问题讨论】：

标签： angular dom drag-and-drop

【解决方案1】：

无需将代码移至 index.html，只需这样做：

改变

ondrop, ondragover, ondragstart, event

到

(drop), (dragover), (dragstart), $event

分别在您的模板（html）中。

【讨论】：

这应该是被接受的答案。这回答了实际问题
我同意，我遇到了同样的问题，这个答案对我有帮助:)

【解决方案2】：

为什么要在 index.html 文件中定义？

如果您在组件 html 中使用任何函数，您需要在 component.ts 文件中定义这些函数。

所以把这些函数移到组件类中

【讨论】：

因为它们只在 index.html 中起作用。它们在 component.ts 中不起作用

【解决方案3】：

如果你要经常使用拖放，我推荐你这个库：https://www.npmjs.com/package/ng2-dnd

【讨论】：

【解决方案4】：

我找到了一个关于如何在 Angular 2 中实现 HTML5 拖放的解决方案： http://www.radzen.com/blog/angular-drag-and-drop/

【讨论】：

我也实现了这一点。您是否尝试过在 Web Worker 中运行您的应用程序（这样您的应用程序就不再阻塞）？见blog.angularindepth.com/…。我在问，因为它似乎不适用于网络工作者 - 除非我犯了太多错误；）

【解决方案5】：

声明一个局部变量来保存数据。

欲了解更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/Events/drop

【讨论】：