1

インベントリの jquery UI ドラッグ アンド ドロップがあります。それは機能しますが、在庫にすでに20個のアイテムがある場合（満杯の場合）、発生しないようにしたいです。

私はjavascript/jqueryが得意ではありません。これを行うためにコードを修正する方法がわかりません。在庫がいっぱいになったら元の位置に戻してほしい。

ドラッグ/ドロップに使用している関数は次のとおりです

function itemInSpot(drag_item,spot) {

    // this is my count. i don't want it to drop an item if it's 20 or more.
    var inv_count = parseInt(<? echo count($inv_item) ?>, 10);

    var oldSpotItem = $(spot).find('img');  
    oldSpotItem.appendTo('#inventory').draggable({ revert: 'invalid' });

    var item = $('<img />');
    drag_item.empty().remove(); 
    item.attr('src',drag_item.attr('src')).attr('title',drag_item.attr('title')).attr('id',drag_item.attr('id')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' }); 

    }

これは、ページロードで設定された関数を実行するコードです。

$(document).ready(function() {
    $(".weapons,.shield").draggable({ stack: "div", revert: 'invalid'});
    $('#inventory').droppable();
    $("#weapon_spot").droppable({ accept: '.weapons'})
    $('#shield_spot').droppable({ accept: '.shield'});

    $('#weapon_spot,#shield_spot,#inventory').bind('drop', function(ev,ui) { itemInSpot(ui.draggable,this); });
    });

では、どうすれば a を追加できif inv_count > 19 then revert item back to it's original positionますか?

4

1 に答える 1

2

これは、6 つのドラッグ/ドロップ可能なアイテムを持つ基本的なjsFiddle の例です。3 番目のアイテムがターゲットにドロップされた後、アラートがトリガーされ、ドロップ可能な領域で他のドラッグ可能なアイテムは許可されません。要素はドラッグ可能なプロパティを保持し、ドロップが試行されると元の位置に戻ります。

jQuery:

$(".ui-widget-content").draggable({
    revert: "invalid"
});
$("#droppable").droppable({
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
        $(ui.draggable).addClass('in');
        if ($('.in').length == 3) {
            $("#droppable").droppable("option", "accept", ".in");
            alert('Full!');
        }
    }
});
于 2012-04-05T16:19:51.290 に答える