角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）。