Javascript jquery ui拖放在移动设备上不起作用

我正在尝试使用Phonegap、jQueryUI、jQueryMobile设计一个应用程序，我想拖放，但我不知道为什么我的代码在手机上不起作用。它在浏览器上运行良好，但当我在手机上运行它时，它就不工作了

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

        });

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

    });

这是我的密码

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

        });

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

    });

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>

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

        });

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

    });

它在浏览器上工作，但在手机上工作。

---

谢谢

移动浏览器不在列表中。看一看，它可能会帮助您在移动设备上实现拖放功能。

我推荐的库是，有了它，您可以在触摸设备上使用Jquery UI的拖放功能

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

        });

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

    });

您可以使用我正在使用的这个代码，它还可以将鼠标事件转换为触摸，并且工作起来非常神奇

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

        });

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

    });

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（）函数。

我喜欢这个开源项目，以防止在css中使用页面滚动

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

        });

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

    });

.draggable {
    touch-action: none
}

---

是的，我认为问题在于功能没有被解除谢谢你的帮助这对可排序的功能有效，但是现在简单的“点击”触摸事件没有注册。有什么想法吗？上面的脚本在我的代码中不起作用。我已经实现并测试了它，但仍然不能使用可拖动功能。这不是最好的解决方案：如果要拖动的元素占据了整个视口，使用jQuery UI Touch Punch可以防止文档被滚动。甚至可能是元素的一个问题，您希望仅通过隐藏溢出的容器（如可拖动的旋转木马）水平拖动该元素。在这种情况下，转盘可防止用户上下滚动文档。我更喜欢jquerytouch（github.com/ajlkn/jQuery.Touch），它使Dragable可能只在移动设备上进行触摸（鼠标手势可以被过滤），并且不会阻止触摸事件传播（因此，文档可以滚动）。这在UI Touch Punch不起作用的情况下对我有效，老实说，它看起来像是某种黑魔法。Touch Punch被放弃了，上一次更新是9年前，网站关闭了