适用于我的Android的Jquery Touch Punch Draggable

Question

Hello I am trying to figure out how to get this code here draggable for my phone I have included the touch punch library but when i try to drag anything on my phone it does not work does anyone know what i am doing wrong? this is the code that i am trying to drag

https://jsfiddle.net/elchininet/2u5xtkv2/

my librarys are

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset = "utf-8">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<link rel="stylesheet" href="styles/styles.css">

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
                <script src="jquery.ui.touch-punch.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
//---Vars
var slices = $("#slices");
var options = $("#options");
var area = $("#area");

var selected;
var result;

//---Array of images
var pizzas = [
    {image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
  {image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
  {image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
  {image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;

//---Make boxes dragables
options.find("div").draggable();

//---When the boxes are dropped
area.droppable({

    drop: function(event, ui){

    if( Number( ui.draggable.attr("data-index") ) == result ){

        alert("correct");

    }else{

        alert("incorrect");

    }

  }

});

//---Insert random pizza slices
function insertPizzas(){

    selected = [];
  result = 0;

  //---Generate aleatory pieces
  var rand

  while(selected.length < 2){

        //---Random value
    rand = Math.floor( Math.random() * total );

    //---Sum result
    result += pizzas[rand].value;

    selected.push( rand );

  }

    //---Clear the slices
    slices.html("");

  //---Add the new slices
  selected.forEach(function(number){

    var img = $("<img/>");

    img.attr("src", pizzas[number].image);

    slices.append(img);

  });

}

insertPizzas();

thank you for any help

Answer 1

You are including the scripts in wrong sequence, or maybe there is a problem with the path where touchpunch is located. Try this with cdn.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>