0

我有这个脚本，并且希望在按下开始按钮之前不要激活可拖动区域。按下开始按钮后，“游戏”开始，可以开始将物品拖入桶中。任何人都知道我该怎么做？

我尝试了许多不同的方法，但始终出现错误。

这是我的代码（现在是一个丑陋的游乐场）。:)

<script>
    $(document).ready(function(){
        $(".items img").draggable({
            revert: true,

        });
        $("#cart").droppable({
            accept: '.items img',
            drop: function( event, ui ) {
                $('#update').show();
                prod_id = ui.draggable.attr("id");
                $.ajax({
                    type: "POST",
                    url: "index2.php",
                    data: "id=" + prod_id,
                    cache: false,
                    success: function(html){
                        $('#update').hide();
                        $('#cart').html(html);
                        $("#cart img").draggable({revert: true});
                    }
                });
            }
        });

        $("#trash").droppable({
            accept: '#cart img',
            hoverClass: 'trashhover',
            drop: function( event, ui ) {
                prod_id = ui.draggable.attr("id");
                ui.draggable.remove();
                $.ajax({
                    type: "POST",
                    url: "index2.php",
                    data: "id=" + prod_id,
                    cache: false,
                    success: function(html){
                        $('#cart').html(html);
                        $("#cart img").draggable();
                    }
                });
            }
    });
});
</script>

        <title>Test</title>
    </head>
    <body>

        <div id="content">
            <div class="center">
<ul class="items">
    <li><img src="images/beer.jpg" id="Ol" width="100" /></li>
    <li><img src="images/lotion.jpg" id="Solkrem" width="100" /></li>
    <li><img src="images/melon.jpg" id="Melon" width="100" /></li>
    <li><img src="images/shorts.jpg" id="Shorts" width="100" /></li>
</ul>
<div id="cartdiv">
    <div id="cart">
        Du har ikke startet spillet
    </div>
    <div id="update">
        Oppdaterer <img src="ajax-loader.gif" />
    </div>
    <p class="countdown" style="clear:both; display:block; height:50px;"></p>
</div>
<div id="trash" >
</div>
</div>
</div>


<div id="countdown2"></div>
<input type="button" value="reset" id="reset" />
<input type="button" value="start" id="start" />


<script type="text/javascript">
    var interval;
    var minutes = 0;
    var seconds = 10;

    function countdown2(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    alert(el.innerHTML = "countdown's over!");                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 10;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
var reset = document.getElementById('reset');
reset.onclick = function() {
    minutes = 0;
    seconds = 10;
    clearInterval(interval);
    interval = null;
    window.location.href = 'logout.php';
}
var start = document.getElementById('start');

start.onclick = function() {
    if (!interval) {
        countdown2('countdown2');
    }
}

</script>
4

1 回答 1

0

您只需要禁用（在页面加载时）#Cart元素 上的droppable，然后在开始按钮的单击事件上启用它。

 start.onclick = function() {
   $( "#cart" ).droppable( "option", "disabled", false );
     if (!interval) {
       countdown2('countdown2');
     }
}

http://jsfiddle.net/Tq5Ug/1/

快乐编码:)

于 2013-05-07T10:28:08.380 回答