Как сделать ограничение на количество элементов в блоке с .droppable

[aslan2030]

Как сделать ограничение на количество элементов в блоке с .droppable

Вот файл:

[рони]

aslan2030, блоки аксессуаров нельзя скрывать, иначе надо делать копии картинок и алгоритм будет иной, перетащить одну картинку из блока на фото, кнопкой плюс увеличить, добавить из другого блока, для смены переместить картинку за пределы фото и выбрать другую. заменить полностью код ниже.

$(document).ready(function(){
    //МЕНЮ ВЫБОРА
    var a = $(".nav a"), d = $(".submenu").show();

    //МЕНЮ ВЫБОРА
    
    
    //ЗАГРУЗКА КАРТИНКИ
    
    var drop = $(".drop"), maxSize = 3000000; //300 Kb
    //проверка drag'n drop
    if (typeof(window.FileReader) == 'undefined') {
        drop.text('Не поддерживается браузером!');
        drop.addClass('error');
    }
    //проверка drag'n drop
    
    
    drop[0].ondragover = function(){
        drop.addClass("hover");
        return false;
    }
    
    drop[0].ondragleave = function(){
        drop.removeClass("hover");
        return false;
    }
    
    drop[0].ondrop = function(event) {
        event.preventDefault();
        drop.removeClass('hover');
        drop.addClass('ondrop');
        
        var file = event.dataTransfer.files[0];
        
        
        if (file.size > maxSize) {
            drop.text('Файл слишком большой!');
            drop.addClass('error');
            return false;
        }else if(file.type != "image/jpeg"){
            alert("only jpeg or jpg !!!");
            drop.removeClass("ondrop");
        }else{
//            $.ajax({
//                url: "getImg.php",
//                data: file,
//                success: function(file){
//                    imgField.html(file);
//                }
//            })
        }
    };
    //ЗАГРУЗКА КАРТИНКИ  
    
    //ВЫБОР АКСЕССУАРА 
    // Переменные
    var acs = $(".accessories"),
        imgField = $("#image"),
        plus = $("#plus"),
        minus = $("#minus"),
        acsW = acs.width(),
        acsH = acs.height();

    acs.draggable({
        zIndex: 100
    });
 var temp = acs.eq(0);
  plus.on("click", function() {
  var w = $(temp).width();
  $(temp).width(w+30);
})

 $(".picture").droppable({
    drop: function(event, ui) {
        var imgs = $(ui.draggable).siblings();
        var revert = imgs.filter(".in").length > 0;
        if (revert) {$(ui.draggable).not(".in").removeClass("in").draggable("option", "revert", true);}
        else {temp = ui.draggable;$(ui.draggable).addClass("in").draggable("option", "revert", "invalid") };
    },
    out: function(event, ui) {
        $(ui.draggable).removeClass("in").width(120).draggable("option", "revert", true);
        $(ui.draggable).data("uiDraggable").originalPosition = {
            top: 0,
            left: 0
        };
        var imgs = $(ui.draggable).siblings();
        var revert = imgs.filter(".in").length < 1;
        if (revert) imgs.not(".in").draggable("option", "revert", "invalid")
    }
});

    
})