jqueryドラッグドロップ - 逆戻り現在

Question

私は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' }); 

    } 

これはpageloadに設定され、機能を実行されるコードでドロップ/私はドラッグして使用している機能です。

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

それでは、どのように私はif inv_count > 19 then revert item back to it's original positionを追加することができます？

Answer 1

はここ6ドラッグ/ドロップ可能アイテムを持っている基本的なjsFiddle exampleだ、と3番目の項目がターゲットにドロップされた後、アラートがトリガされ、他のdraggablesがドロップ可能なエリア内に入ることができません。要素はドロップ可能なプロパティを保持し、ドロップが試行されると元の位置に戻ります。

の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!'); 
     } 
    } 
});