移动游戏的拖放代码答案

【问题标题】：Drag and Drop Code for Mobile Game移动游戏的拖放代码
【发布时间】：2015-12-20 02:46:50
【问题描述】：

我的手机游戏有拖放功能。这里是：

https://jsfiddle.net/elchininet/otw3pw13/4/

不幸的是，我不知道我的实际源代码中出了什么问题。

我认为这可能是因为我拥有的所有库？我是应用程序制作新手和JavaScript。这是我的代码：

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

【问题讨论】：

我已经尝试了所有方法，甚至移动了 cdn 脚本，为什么这到底行不通
你对你的代码有什么期望？它有什么问题？在 jsfiddle 中，您可以拖放数字。更具体地解释您的期望。
我的记事本文件 .html 我打开它，没有比萨饼显示，数字也没有拖动，我会截图
i.imgur.com/khUv6ar.png
如果你把我放在上面的代码放入 html 文件并运行它，你会发现它不像小提琴那样工作，因为我认为我缺少某种库或者我的库不是按顺序，我不确定，但我喜欢弄清楚，呵呵

标签： javascript jquery html jquery-ui jquery-mobile

【解决方案1】：

通过您的 cmets，我看到您正在本地测试您的项目。使用本地服务器来测试您的项目。不要从文件系统直接在浏览器中打开 HTML。试试Xampp 或Wampp。

另一方面，将jQuery 代码放入document 就绪事件中。

$(document).on("ready", function(){

    //--- Put the jQuery code here

}

Here 您的代码（带有document 就绪事件）从 Web 服务器运行：

【讨论】：

即使我去w3学校复制粘贴到那里它仍然不起作用
不要尝试将代码粘贴到 w3 学校。仅在本地服务器或 Web 服务器中测试您的代码。我已经用你在网络服务器上工作的代码更新了我的答案。
它应该可以工作，但将所有在线脚本（如 jQuery）移动到项目的文件夹中。
我要打电话测试一下
下载我机器上的所有库并将其放入包含我的 HTML 文件的文件夹中，并在没有 url 的情况下将它们链接到本地？