Angular 2 drag & drop

Question

I have these functions in my index.html of my Angular 2 project:

<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>

When I put the functions in my component, it gives the following errors:

Uncaught ReferenceError: drag is not defined at HTMLImageElement.ondragstart
Uncaught ReferenceError: allowDrop is not defined at HTMLDivElement.ondragover

the elements using the functions are in the component 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

Declare a local variable to save data.

For more information see: https://developer.mozilla.org/en-US/docs/Web/Events/drop

Answer 2

There's no need to move your code to index.html, just do this:

Change

ondrop, ondragover, ondragstart, event

to

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

respectively in your template(html).

Answer 3

I found a solution on how to implement HTML5 drag and drop in Angular 2: http://www.radzen.com/blog/angular-drag-and-drop/

Answer 4

If you are going to use drag and drop frenquently, I recommend you this library: https://www.npmjs.com/package/ng2-dnd

Answer 5

why are you defining in the index.html file?

if you using any functions in the component html you need define these function in the component.ts file.

so move these function into component class