Question

我的代码存在问题。我认为可拖动项禁用了我页面中的链接。我试过，我想在IOS phonegap应用程序中使用此代码。＆＃34;导航中的两个链接＆＃34; div在IOS中显示为禁用。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="apple-touch-fullscreen" content="yes" />

    <script type="text/javascript" src="game1js/head.min.js"></script>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script>
    $(document).ready(function() { $("#win").delay(13000).fadeOut(3000); });

    </script>
    <link rel="stylesheet" type="text/css" href="game1css/style.css" />
    <style>body {
        background-image: url("img/game1_bkg.jpg"); background-repeat:no-repeat;    overflow: hidden;
    } </style>
</head>
<body>
        <div id="touchme1" class="touchBox"><img src="img/game1_1.png"/></div>
        <div id="touchme2" class="touchBox"><img src="img/game1_2.png"/></div>
        <div id="touchme3" class="touchBox"><img src="img/game1_0.png"/></div>
        <div id="touchme4" class="touchBox"><img src="img/game1_3.png"/></div>
        <div id="touchme5" class="touchBox"><img src="img/game1_4.png"/></div>
        <div id="touchme6" class="touchBox"><img src="img/game1_5.png"/></div>
        <div id="touchme7" class="touchBox"><img src="img/game1_6.png"/></div>
        <div id="touchme8" class="touchBox"><img src="img/game1_7.png"/></div>
        <div id="touchme9" class="touchBox"><img src="img/game1_8.png"/></div>
        <div id="touchme10" class="touchBox"><img src="img/game1_9.png"/></div>
        <div id="win" style="margin: auto;  position: absolute;bottom: 0;left: 0;top: 0;right: 0; z-index:100;"><img src="img/start.png" id="messageWin"></div>

<div id="drop" class="dropArea"><b>Trascina qui i numeri</b><br><div id="n1" style="float:left;"></div><div id="n2" style="float:left;"></div></div>
<script>
head.js("game1js/jquery.min.js","game1js/ui.js","game1js/touch.js", function (){
   $("#touchme1, #touchme2, #touchme3, #touchme4, #touchme5, #touchme6, #touchme7, #touchme8, #touchme9, #touchme10").draggable({revert:true});
        var sum=0;
$("#drop").droppable({
    drop: function( event, ui ) {
        console.log($(ui.draggable).attr("id"));
        if($(ui.draggable).attr("id")=="touchme1"){
                     document.getElementById("n1").innerHTML = "<img src='img/game1_1.png'/>";
                     sum++;
                     $(ui.draggable).remove();
        }
        if($(ui.draggable).attr("id")=="touchme9"){
                     document.getElementById("n2").innerHTML = "<img src='img/game1_8.png'/>";
                     sum++;
                     $(ui.draggable).remove();
        }
        if($(ui.draggable).attr("id")!="touchme1" && $(ui.draggable).attr("id")!="touchme9"){
            //$(ui.draggable).remove();
        }
        if (sum==2){
            document.getElementById('messageWin').src="img/end.png";
            $("#win").delay(100).fadeIn(3000);
            document.getElementById('myAudio').src="../audio/01_end.mp3";
            document.getElementById('myAudio').play();

            localStorage.setItem('level1', 1);
            setTimeout(function() {window.location.href='../index.html';},10000);

        }
        $(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
    },
    over: function(event, ui) {
        $(this).css({'border':'#a33 dashed 3px','background':'#eee'});
    },
    out: function (event, ui){
        $(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
    }
});
});
</script>
<div style="visibility: hidden;"><audio src="../audio/01_instructions.mp3" autoplay controls="false" id="myAudio"></div>
<div id="navigation" style="z-index:100; position: absolute; top: 650px; left: 455px;">
    <a href="javascript:window.location.href='../spots/spotSlide1.html';"><img src="../img/left.png" width="64px"></a>
    <a href="javascript:window.location.href='game1.html';"><img src="../img/reload2.png" width="64px"></a>
</div>


</body>
</html>

你有想法修改代码吗？感谢。

可拖动项目禁用<a href=""> links</a>

0 个答案: