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>

Answer 1

无需将代码移至index.html，只需执行此操作：

更改

ondrop, ondragover, ondragstart, event

到

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

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

Answer 2

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

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

所以将这些功能移到组件类

中

Answer 3

如果您要经常使用拖放，我建议您使用此库：https://www.npmjs.com/package/ng2-dnd

Answer 4

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

Answer 5

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

有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/Events/drop

Angular 2 drag＆amp;下降

5 个答案: