On initial TouchStart launch move - Angular2

Question

I need to add a drag&drop event to mobile devices, the touchstart event fires as expected, but there is no visible effect.

So, is it possible to fire your own drag and drop event on touchstart or do you know an example, for example, with @HostListener that shows how to deal with this problem?

 this.htmlElement.ontouchstart = (touchEvent: TouchEvent) => { // here I check if user intend starting a drag&drop or if there are some other touch behaviours if (dragging) { // What to do here to start drag and drop } } 

Thanks in advance for your answers!

Answer 1

Angular supports drag and drop, so you can use them like this:

 <div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"> Drop here</div> <div (dragstart)="onDragStart($event, dragData)">drag me </div> 

https://plnkr.co/edit/xAjNaXvrMouM5q33YoIG?p=info

And here is a list of all of them, I think:

 (dragleave) (drag) (dragend) (dragenter) (dragexit) (dragover) (dragstart) (drop) 

For touch related events, you should use something like HammerJs along with Angular2.

Answer 2

From the W3school drag and drop tutorial, you can use angular event-bindinds instead of the built-in bindings in html. All events starting with on are omitted, and you add parentheses around it (for example, ondrag becomes (drag) ). I wrote an example from w3school as angular2 plunkr

HTML:

 <div id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)"></div> <br> <img id="drag1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" draggable="true" (dragstart)="drag($event)" width="336" height="69"> 

CSS

 #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } 

c

  allowDrop(ev) { ev.preventDefault(); } drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }