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>

Eric Aya · Accepted Answer · 2018-02-09 08:54:13Z

17

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

edited Feb 9, 2018 at 8:54

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Feb 9, 2018 at 8:51

kzrfaisal

1,4535 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The mentalist Coder Over a year ago

This should be accepted answer. This answers the actual question

cyber_angel Over a year ago

I agree, I was having the same problem and this answer helped me :)

CharanRoot · Accepted Answer · 2017-06-12 21:16:17Z

1

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

answered Jun 12, 2017 at 21:16

CharanRoot

6,3352 gold badges31 silver badges45 bronze badges

1 Comment

Jan V. Over a year ago

Because they only work in the index.html. They do not work in the component.ts

dmarquina · Accepted Answer · 2017-06-12 23:01:02Z

0

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

answered Jun 12, 2017 at 23:01

dmarquina

4,1761 gold badge30 silver badges30 bronze badges

Comments

Jan V. · Accepted Answer · 2017-06-13 17:45:17Z

0

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

answered Jun 13, 2017 at 17:45

Jan V.

1814 silver badges12 bronze badges

1 Comment

Trinimon Over a year ago

I've implemented this as well. Have you tried to run your app in a web worker (so your app is not blocking any longer)? See blog.angularindepth.com/…. I'm asking, because it seems not to work in a web worker - unless I made too many errors ;)

4b0 · Accepted Answer · 2018-05-04 03:31:11Z

-1

Declare a local variable to save data.

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

edited May 4, 2018 at 3:31

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered May 4, 2018 at 2:34

fallwind

1591 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular 2 drag & drop

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Related