jquery ui拖放不工作在手機

Question

我想設計一個使用Phonegap，JQuery UI，JQuery手機的應用程序，我想拖放但我不知道爲什麼我的代碼在手機上無法工作。它在瀏覽器上正常工作，但是當我在移動設備上運行時，它無法正常工作。

這裏是我的代碼

HTML代碼：

<div class="mathheader" align="center" id="container"> 
<span id="a1" class="cartridge" ><img src="img/app2.png"/></span> 
    <span id="a2" class="cartridge"><img src="img/app2.png" /></span> 
    <span id="a3" class="cartridge"><img src="img/app2.png" /></span> 
     <span id="a4" class="cartridge" ><img src="img/app2.png" /></span> 
     <span id="a5" class="cartridge" ><img src="img/app2.png" /></span> 

<table width="100%" border="1" cellspacing="0" cellpadding="5"> 
<tr bgcolor="#F2F2F2"> 
<td width="50%" align="center" class="x" > 
<p><b>coulm1</b></p> 
</td> 
<td width="50%" align="center" class="x"> 
<p><b>coulm2</b></p> 
</td> 
    </tr> 
    <tr> 
    <td width="50%" align="center" id="Td1" class="y" background="img/1.png">  
    </td> 
    <td width="50%" align="center" id="Td2" class="y" background="img/4.png"> 
    </td> 
    </tr> 
    </ table> 

我需要刪除此表中所列：

現在我用DARG和一滴類這裏是javascript代碼： 我使用jquery ui

$(function() { 
     $(".cartridge").draggable({ 
      cursor: 'move', 
      helper: 'clone', 
      revert: 'invalid', 

     }); 

     $(".y").droppable({ 
      accept: '.cartridge', 
      drop: function (event, ui) { 
       $(ui.draggable).appendTo(this); 
       checkwinner(); 
      } 
     }); 

    }); 

它適用於瀏覽器，但在移動設備上。 謝謝

Answer 1

我建議圖書館是https://github.com/yeco/jquery-ui-touch-punch，這個您拖放從jQuery UI的應該在觸摸的工作圖謀

您可以使用此代碼，我使用，它也轉換鼠標事件到觸摸，它的工作原理是魔法。

function touchHandler(event) { 
    var touch = event.changedTouches[0]; 

    var simulatedEvent = document.createEvent("MouseEvent"); 
     simulatedEvent.initMouseEvent({ 
     touchstart: "mousedown", 
     touchmove: "mousemove", 
     touchend: "mouseup" 
    }[event.type], true, true, window, 1, 
     touch.screenX, touch.screenY, 
     touch.clientX, touch.clientY, false, 
     false, false, false, 0, null); 

    touch.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
} 

function init() { 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true); 
} 

並在您的document.ready中調用init（）函數。

Answer 2

移動瀏覽器未列在JQuery UI browser support的列表中。看看this SO question，它可能會幫助您在移動設備上進行拖放實施。