TouchStart देशी घटना पर खींचना शुरू करें - Angular2

Question

मैं मोबाइल उपकरणों पर drag&drop घटना जोड़ने की जरूरत है, touchstart घटना के रूप में उम्मीद फायरिंग कर रहा है लेकिन वहाँ कोई दिखाई प्रभाव है।

तो, वहाँ एक देशी खींचें शुरू करने और @HostListener साथ touchstart पर ड्रॉप घटना या आपको एक उदाहरण पता है, उदाहरण के लिए करने के लिए एक संभावना से पता चलता है जो इस समस्या को संभालने के लिए है?

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

आपके उत्तरों के लिए अग्रिम धन्यवाद!

Answer 1

कोणीय का समर्थन करता है खींचें, ताकि आप उन्हें इस तरह का उपयोग कर सकते हैं:

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

संबंधित स्पर्श के लिए:

<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

और यहाँ उन सभी की सूची मुझे लगता है कि है घटनाओं, आपको Angular2 के साथ HammerJs जैसे कुछ का उपयोग करना चाहिए।

Answer 2

drag and drop पर डब्ल्यू 3 स्कूली ट्यूटोरियल से आप एचटीएमएल में निर्मित बाइंडिंग के बजाय कोणीय घटना-बाइंडिंड का उपयोग कर सकते हैं। on से शुरू होने वाली सभी घटनाओं को छोड़ दिया जाता है, और आप इसके चारों ओर कोष्ठक जोड़ते हैं (उदा। ondrag(drag) बन जाता है)।

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

सीएसएस:

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