我正在尝试使用Phonegap,JQuery UI,JQuery mobile设计一个应用程序,我想拖放但我不知道为什么我的代码不适用于移动设备。它在浏览器上工作正常,但是当我在移动设备上运行时,它无法正常工作。
这是我的代码
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();
}
});
});
它适用于浏览器,但适用于移动设备。 谢谢
答案 0 :(得分:8)
我推荐的库是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()函数。
答案 1 :(得分:0)
移动浏览器未列在JQuery UI browser support列表中。看一下this SO question,它可能会帮助您在移动设备上实现拖放。
答案 2 :(得分:0)
我喜欢这个开源项目https://interactjs.io/,并防止在CSS中使用页面滚动
.draggable {
touch-action: none
}