我正在尝试使用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用户界面
$(function () {
$(".cartridge").draggable({
cursor: 'move',
helper: 'clone',
revert: 'invalid',
});
$(".y").droppable({
accept: '.cartridge',
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
checkwinner();
}
});
});
它在浏览器上工作,但在移动的上。谢谢
4条答案
按热度按时间ijxebb2r1#
我推荐的库是https://github.com/yeco/jquery-ui-touch-punch,有了它,您从Jquery UI的拖放操作应该可以在触控设备上使用
你可以使用我正在使用的这段代码,它也可以将鼠标事件转换为触摸,它的工作原理就像魔术一样。
在你的document.ready中只需要调用init()函数。
6tqwzwtp2#
移动的浏览器没有列在JQuery UI browser support列表中。看看this SO question,它可能会帮助你在移动设备上实现拖放。
c9qzyr3d3#
我喜欢这个开源项目https://interactjs.io/,并防止在css中使用页面滚动
qni6mghb4#
当我们使用
event.preventDefault();
时,可点击的功能不起作用。因此,只需删除这些行并使用下面的代码。另外,请在所有其他功能之前使用此代码。这样拖放功能也可以用于移动的: