JQuery: Why is my puzzle not working on mobiles?

Question

I'm new here and try to get arround the forum a bit. I've just finish a programming class (webforce3) and test all I can to review my classes.

My first question is about a little program/game that seems not to work on mobile devices. Can anyone give me a clue on why is that?

Is it because of the jquery-ui or my code is wrong?

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>

Best is to post the fiddle to see what is happening: https://jsfiddle.net/scooterMaya/ujadw43e/2/

Thanks for any help. I'm trying to anymate a bit my online resume @ http://michelcavro.net

Answer 1

your problem seems to be that touch events do not drag your pictures as mouse drag does. you need to simulate mouse events with touch

add these functions

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

and call init() from bottom of your ready function!

this solution is from this SO article

and the updated working fiddle is here