角度2ドラッグ＆

Question

ドロップ：

<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である：なぜあなたはindex.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

にこれらの機能を移動し、私はあなたにこのライブラリをお勧めします。私は、HTML5のドラッグを実装し、中にドロップする方法についての解決策を見つけた

Answer 2

？

コンポーネントhtmlの関数を使用している場合は、これらの関数をcomponent.tsファイルに定義する必要があります。あなたがドラッグを使用してfrenquentlyドロップしようとしている場合

ので、コンポーネントクラス

Answer 3

https://www.npmjs.com/package/ng2-dnd 2の角度： http://www.radzen.com/blog/angular-drag-and-drop/

Answer 4

index.htmlをするようにコードを移動する必要はありません、ちょうどこの操作を行います。

変更

0あなたのテンプレート（HTML）でそれぞれ

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

から

ondrop, ondragover, ondragstart, event 

。