Question

我在stackoverflow上找到了这个函数，但是我试图扩展它来处理我的Ipod touch的触摸事件。我认为添加三行代码应该很容易，但我认为有些东西我不理解。我的代码是：

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

此功能在计算机上运行良好。我正在寻找的是添加事件，使其在触摸屏设备上的工作方式相同。也许只是做onclick会更容易，因为触摸屏可能很挑剔，但有人可以帮我创建一个交换功能来处理我的pod。

Answer 1

因此经过一番思考后，我认为点击事件在触摸屏上更加用户友好，因此我将代码更改为单击事件上的交换字母，而不是在每个设备上都可以使用。

$('.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");

}

});

我刚刚为每个td添加了一个整数id，并在每次点击时将其html与此html进行比较并更改它们或交换html。这种方式适合我，所以我想我会分享我的解决方案。如果这是一种不好的方式，或者你可以建议更快的方式，请评论。

拖放和交换触摸屏设备

1 个答案: