CODEWITHSUNDEEP
javascripttouch
Coder
Coder

Reputation: 421

Getting mutilple touch end events javascript

I am using drag and drop between li of ul. Code is working fine for desktop version.

<ul>
 <li> A </li>
 <li> A </li>
 <li> C </li>
 <li> D </li>
 <li> E </li>
</ul>

But for mobile version i am getting mutiple touch ends

li.addEventListener('touchstart', touchStart);
li.addEventListener('touchmove', touchMove);
li.addEventListener('touchend', touchEnd);

enter image description here

That's why i am unable to get correct element where i am dropping at. How to get correct last touch element in mobiles?

Upvotes: 0

Views: 48

Answers (1)

ortagon
ortagon

Reputation: 533

Post how you add event listeners to li elements. And consider below code

var li=document.querySelectorAll('li');
	
	for(var i=0;i<li.length; i++){

	  li[i].addEventListener('touchstart', function(e){
			console.log('Start '+e.target.id);
			});
	
		li[i].addEventListener('touchmove', function(e){
			console.log('Move '+e.target.id);
			});

		li[i].addEventListener('touchend', function(e){
			console.log('End '+e.target.id);
			});			
	}
<ul>
  <li  id='li1'>One</li>
  <li id='li2'>Two</li>
  <li id='li3'>Three</li>
  <li id='li4'>Four</li>
</ul>

Upvotes: 1

Related Questions