drag and drop and swap with touchscreen devices

StackOverflow https://stackoverflow.com/questions/22548784

Question

I have found this function somewhere on stackoverflow but I am trying to expand it to handle touch events for my Ipod touch. I thought it should be pretty easy to do by adding three lines of code but I think there is something I'm not understanding. My code is:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>

<div id="content-container">
<table>

<tr><td draggable="true" class="letter">a</td><td 

class="letter" draggable="true">b</td><td class="letter"draggable="true">c</td></tr>
</table>
</div>

<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>

$(document).ready(function(){

//this just prevents screen from sliding around when touching it
addEventListener('touchmove', function(e) {
e.preventDefault();
}, true);

var draggedItem = null; 

$('.letter').each(function(index){
    $(this).on("dragstart", handleDragStart);
    $(this).on("drop", handleDrop);
    $(this).on("dragover", handleDragOver);


//I thought I could just add these 3 lines of code for it to work on touch screen devices


//$(this).on("ontouch", handleDragStart);
    //$(this).on("touchend", handleDrop);
    //$(this).on("touchmove", handleDragOver);

//please help with this part for touch screens
});

function handleDragStart(e){
    draggedItem=this;
e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault(); 
// Necessary. Allows us to drop.
      }
      return false;
}

function handleDrop(e){
    if (e.stopPropagation) {
       // e.stopPropagation(); 
// Stops some browsers from redirecting.
    }

    if (draggedItem != this ) {
 //MH - swap if we're not dragging the item onto itself
        var copy=$(this).clone(true,true);

$(this).replaceWith($(draggedItem).clone(true,true));

$(draggedItem).replaceWith($(copy).clone(true,true));

    } 
    return false;
}    

});
</script>

</body>
</html>

This function works great on computer. All I am looking for is to add the events so it works the same on a touch screen device. Maybe it would be easier to just do onclick instead cause touch screens can be finicky but can someone please help me create a swap function to work on my pod.

Was it helpful?

Solution

So after some thought, I think click event is more user friendly on a touch screen so I changed my code to swap letters on a click event instead that should work on every device.

$('.letter').on('click', function(e) {

if(b !=''){
a=$(this).html();
idNumb2 = $(this).attr('id');
idNumb2="#"+idNumb2;
if(idNumb !='' && idNumb !='undefined'){
$(idNumb).css("background-color", "#fff");
$(this).html(b);

$(idNumb).html(a);
checkWords();
}
a='';
b='';

idNumb='';
idNumb2='';

}
else{

b=$(this).html();


idNumb = $(this).attr('id');
idNumb="#"+idNumb;
$(idNumb).css("background-color", "#a5b06b");

}

});

I just added an integer id to each td and compare its html with this html on each click and change them or swap the html. This way works for me so I thought I would share my solution. Please comment if this is a bad way of doing it or if you can suggest a faster way.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top