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


jquery ui drag and drop not work on mobile

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

这是我的代码

HTML 代码：

1
2
3
4
5
 <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>
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">
<p>coulm1</p>
</td>
<td width="50%"  align="center" class="x">
 <p>coulm2</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

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

相关讨论

我喜欢这个开源项目 https://interactjs.io/ 并防止在 css 中使用页面滚动

1
2
3
.draggable {
    touch-action: none
}

移动浏览器未列在 JQuery UI 浏览器支持列表中。看看这个 SO question，它可能会帮助您在移动设备上实现拖放操作。

相关讨论