问题
I have a drag and drop feature for my mobile game. Here it is:
https://jsfiddle.net/elchininet/otw3pw13/4/
Unfortunately, I have no idea what's going wrong inside my actual source code.
I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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/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>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15 ">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo portrait">
</div>
<div data-role="main" class="ui-content">
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
<li><a href="#myPopup2" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-inline">How To Play</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" class="ui-btn ui-btn-b ui-icon-home ui-btn-icon-left">Home</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
<p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>
</div>
</div>
</body>
</html>
CSS
#options div{
background:#666;
color: #FFF;
display: inline-block !important;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
width: 50px;
}
#slices img{
display: inline-block;
height: 30px;
}
#area{
background: #CCC;
border: 1px solid #666;
margin-top: 20px;
height: 200px;
width: 200px;
}
JavaScript
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
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){
console.log("yes");
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();
回答1:
By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.
By the other hand, put the jQuery code inside a document ready event.
$(document).on("ready", function(){
//--- Put the jQuery code here
}
Here you have your code (with the document ready event) running from an web server:
来源：https://stackoverflow.com/questions/34377513/drag-and-drop-code-for-mobile-game