角2拖放

Question

我有这些功能在我的我的角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

如果你要使用拖放frenquently下降，我建议你这个库：https://www.npmjs.com/package/ng2-dnd

Answer 2

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

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

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

Answer 3

我发现如何实现HTML5拖放在下降的解决方案角度二： http://www.radzen.com/blog/angular-drag-and-drop/

Answer 4

有没有需要移动你的代码的index.html，只是这样做：

变化

ondrop, ondragover, ondragstart, event 

到

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

分别在您的模板（HTML）。