Angular 2 拖放技术

Question

我在我的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>

- Jan V.

Answer 1

不需要将您的代码移动到 index.html 文件中，只需执行以下操作：

更改

ondrop, ondragover, ondragstart, event

至

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

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

- kzrfaisal

---

这应该是被接受的答案。它回答了实际问题。 - The mentalist Coder

我同意，我也遇到了同样的问题，这个答案帮助了我 :) - cyber_angel

Answer 2

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

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

因此，将这些函数移动到组件类中。

- CharanRoot

---

因为它们只在index.html中起作用，而不在component.ts中起作用。 - Jan V.

Answer 3

如果您经常使用拖放功能，我建议您使用这个库：https://www.npmjs.com/package/ng2-dnd。

- dmarquina

Answer 4

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

- Jan V.

---

我也已经实现了这个功能。你尝试过在Web Worker中运行你的应用程序吗（这样你的应用程序就不会再阻塞了）？请参见https://blog.angularindepth.com/angular-with-web-workers-step-by-step-dc11d5872135。我问这个问题是因为它似乎在Web Worker中无法正常工作 - 除非我犯了太多错误 ;) - Trinimon

Answer 5

声明一个本地变量以保存数据。

更多信息请参见：https://developer.mozilla.org/zh-CN/docs/Web/Events/drop

- fallwind