JQuery: 为什么我的拼图不能在手机上运行？

Question

我是新来的，试着稍微熟悉一下论坛。我刚刚完成编程 class (webforce3) 并尽我所能测试我的 classes.

我的第一个问题是关于 program/game 似乎无法在移动设备上运行的一点。谁能告诉我这是为什么？

是因为jquery-ui还是我的代码有误？

script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });

  $(document).ready(function(){
    $('ul').each(function(){
      // get current ul
      var $ul = $(this);
      // get array of list items in current ul
      var $liArr = $ul.children('li');
      // sort array of list items in current ul randomly
      $liArr.sort(function(a,b){
        // Get a random number between 0 and 10
        var temp = parseInt( Math.random()*10 );
        // Get 1 or 0, whether temp is odd or even
        var isOddOrEven = temp%2;
        // Get +1 or -1, whether temp greater or smaller than 5
        var isPosOrNeg = temp>5 ? 1 : -1;
        // Return -1, 0, or +1
        return( isOddOrEven*isPosOrNeg );
      })
      // append list items to ul
      .appendTo($ul);            
    });
  });
</script>

最好是 post fiddle 看看发生了什么： https://jsfiddle.net/scooterMaya/ujadw43e/2/

感谢您的帮助。我正在尝试修改我的在线简历@ http://michelcavro.net

Answer 1

您的问题似乎是触摸事件不会像鼠标拖动那样拖动您的图片。你需要用触摸来模拟鼠标事件

添加这些功能

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);
}

并从准备好的函数底部调用 init()！

这个解决方案来自这个 SO 文章

更新后的工作 fiddle 是 here

JQuery: 为什么我的拼图不能在手机上运行？

JQuery: Why is my puzzle not working on mobiles?

jquery

mobile

puzzle