Angular 2 拖放
2017-06-12
3302
我的 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>
3个回答
无需将您的代码移至 index.html,只需执行以下操作:
在您的模板(html)中将
ondrop, ondragover, ondragstart, event
更改为
(drop), (dragover), (dragstart), $event
。
kzrfaisal
2018-02-09
为什么要在 index.html 文件中定义?
如果您在组件 html 中使用任何函数,则需要在 component.ts 文件中定义这些函数。
因此将这些函数移到组件类中
CharanRoot
2017-06-12
如果你要频繁使用拖放功能,我推荐你使用这个库: https://www.npmjs.com/package/ng2-dnd
dmarquina
2017-06-12