关于 javascript:jquery ui 拖放在移动设备上不起作用

jquery ui drag and drop not work on mobile

我正在尝试使用 Phonegap、JQuery UI、JQuery mobile 设计一个应用程序，我想拖放，但我不知道为什么我的代码不能在移动设备上运行。它在浏览器上运行良好，但当我在移动设备上运行时，它无法正常工作。

这是我的代码

HTML 代码：

1
2
3
4
5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table width=“100%” border=“1” cellspacing=“0” cellpadding=“5”>
<tr bgcolor=“#F2F2F2”>
<td width=“50%” align=“center” class=“x”>
coulm1
</td>
<td width=“50%” align=“center” class=“x”>
coulm2
</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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(function () {
$(“.cartridge”).draggable({
cursor: ‘move’,
helper: ‘clone’,
revert: ‘invalid’,

});

$(“.y”).droppable({
accept: ‘.cartridge’,
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
checkwinner();
}
});

});

它适用于浏览器，但适用于移动设备。
谢谢

我推荐的库是 https://github.com/yeco/jquery-ui-touch-punch ，这样你从 Jquery UI 中的拖放应该可以在触摸设备上工作

您可以使用我正在使用的这段代码，它还将鼠标事件转换为触摸，它就像魔术一样工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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() 函数。

jquery ui drag and drop not work on mobile

猜你喜欢