适用于我的 Android 的 Jquery Touch Punch 可拖动答案

【问题标题】：Jquery Touch Punch Draggable for my Android适用于我的 Android 的 Jquery Touch Punch 可拖动
【发布时间】：2015-12-21 01:47:20
【问题描述】：

您好，我想弄清楚如何在此处为我的手机拖动此代码我已经包含了触摸打孔库，但是当我尝试在手机上拖动任何东西时它不起作用有谁知道我做错了什么？这是我试图拖动的代码

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

我的图书馆是

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

感谢您的帮助

【问题讨论】：

标签： android jquery jquery-ui drag-and-drop jquery-ui-touch-punch

【解决方案1】：

您包含的脚本顺序错误，或者可能是 touchpunch 所在的路径有问题。用 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>

【讨论】：