Question

我有这个脚本，并希望在按下开始按钮之前，可拖动区域不会处于活动状态。当按下开始按钮时，“游戏”开始，并且可以开始将项目拖入桶中。任何人都知道如何做到这一点？

我尝试了很多不同的东西，但是bug一直在出现。

这是我的代码（现在是一种丑陋的游乐场）。：）

<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>

Answer 1

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

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

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

快乐编码：）

将我的倒计时附加到draggable元素

1 个答案: