TouchStart yerel olay başlatılıyor sürükleme - Angular2

Question

Mobil cihazlarda drag&drop olayını eklemem gerekiyor, touchstart etkinliği beklendiği gibi tetikleniyor ancak görünür bir etkisi yok.

Yani, bir yerli sürükle başlayıp @HostListener ile örneğin touchstart olayı damla veya bir örnek biliyor musunuz için bir olasılık bu sorunu nasıl işleneceğini gösteren, var mı?

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

Yanıtlarınız için şimdiden teşekkür ederiz!

Answer 1

Eğik destekler sürüklemek, bu yüzden bu gibi kullanabilirsiniz:

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

ilgili dokunuş için: buraya

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

Ve

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

sanırım hepsini listesi Olaylar, Angular2 ile birlikte HammerJs gibi bir şey kullanmalısınız.

Answer 2

drag and drop'daki W3school öğreticisinden, html'de yerleşik bağlamalar yerine açısal olay-bağlamaları kullanabilirsiniz. on ile başlayan tüm olaylar atlanır ve buna parantez eklersiniz (ör. ondrag, (drag) olur).

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