Question

我是新来的，并尝试了解论坛。我刚刚完成了一个编程课程（webforce3），并尽我所能来测试我的课程。

我的第一个问题是关于一个似乎无法在移动设备上运行的小程序/游戏。谁能给我一个线索，为什么会这样？

是因为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>

最好发布小提琴，看看发生了什么： 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（）！

此解决方案来自this SO article

和更新的工作小提琴是 here

JQuery：为什么我的拼图不适用于手机？

1 个答案: