All'evento nativo TouchStart iniziare a trascinare - Angular2

Question

Devo aggiungere l'evento drag&drop sui dispositivi mobili, l'evento touchstart si attiva come previsto ma non c'è alcun effetto visibile.

Quindi, c'è la possibilità di avviare un nativo il drag and drop evento touchstart o fai a sapere, ad esempio, per esempio con @HostListener, che mostra come gestire questo problema?

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

Grazie in anticipo per le vostre risposte!

Answer 1

supporti angolari trascinare, in modo da poterli utilizzare in questo modo:

<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

Ed ecco l'elenco di tutti loro immagino:

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

per il tocco correlate eventi, dovresti usare qualcosa come HammerJs insieme a Angular2.

Answer 2

Dal tutorial W3school su drag and drop è possibile utilizzare l'evento angolare-bindinds anziché i collegamenti incorporati in html. Tutti gli eventi che iniziano con on vengono omessi e si aggiunge una parentesi attorno ad esso (ad esempio, ondrag diventa (drag)). ho scritto l'esempio da W3School come 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)); 
    }