Rozpoczęcie przeciągania natywnego zdarzenia TouchStart - Angular2

Question

Muszę dodać zdarzenie drag&drop na urządzeniach mobilnych. Zdarzenie touchstart jest uruchamiane zgodnie z oczekiwaniami, ale nie ma widocznego efektu.

Tak, czy istnieje możliwość, aby rozpocząć natywną przeciągnij i upuść zdarzenie na touchstart lub wiesz przykład, na przykład z @HostListener, który pokazuje, jak obsługiwać ten 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 
    } 
} 

Z góry dziękuję za odpowiedzi!

Answer 1

kątowe wsporniki przeciągnąć, więc można ich używać tak:

<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

A oto lista wszystkich z nich Chyba:

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

Dla powiązanej kontakcie wydarzenia, powinieneś użyć czegoś takiego jak HammerJs wraz z Angular2.

Answer 2

Z samouczka W3school na drag and drop można użyć kątowych zdarzeń-bindind zamiast wbudowanych wiązań w html. Wszystkie zdarzenia rozpoczynające się od on są pomijane i dodajesz do nich nawiasy (np. ondrag staje się (drag)). Pisałem przykład z w3school jako 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)); 
    }