Puzzle1

Sortable puzzle

HTML

<script src="https://code.jquery.com/jquery-2.x-git.js">
</script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<body>
  <h1>PUZZLE 1</h1>
  <div class="container">
    <ul id="sortable">
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T11.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T12.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T13.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T14.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T21.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T22.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T23.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T24.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T31.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T32.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T33.jpg"></li>
      <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T34.jpg"></li>
    </ul>
  </div>
</body>

CSS

link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" body {
      background-image: none;
    }
    
    a {
      right: 0;
      list-style-type: none;
      position: relative;
    }
    
    h1 {
      text-align: center;
      margin: 20px 0 0 -50px;
    }
    
    .container {
      width: 450px;
      margin: auto;
    }
    
    #sortable {
      list-style-type: none;
      margin: auto;
      padding: 0;
      width: 450px;
    }
    
    #sortable li {
      margin: 0 0 0 0;
      padding: 1px;
      float: left;
      width: 100px;
      height: 90px;
      font-size: 4em;
      text-align: center;
    }
    
    * {
      font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
      font-size: 17px;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      line-height: 23px;
    }

JavaScript

$(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);
      });
   		init();   	
    });
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);
}