On TouchStart native event start dragging - Angular2

Question

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

So, is there a possibility to start a native drag and drop event on touchstart or do you know an example, for instance with @HostListener, which shows how to handle this issue?

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

Answer 1

Angular supports drag , 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 the list of all of them I guess :

(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 tutorial on drag and drop you can use the angular event-bindinds instead of the built in bindings in html. All the events that starts with on is omitted, and you add parenthesis around it (e.g. ondrag becomes (drag)). I have written the example from w3school as an 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;
}

ts:

  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));
  }