Accept multiple elements droppable jquery UI

Question

I'm using droppable and draggable thanks to JQuery UI.I have a list of items, 9 in total. There are three droppable box, 3 going to box1, another three elements go to box2, and another three go to box3. But i discover that when an correct item drop in the box, i can't drop the other two correct items, because only accept one!! How can solve this and let to drop in three items not only one? HTML structure:

<div class="row">  
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-candy" class="objectdrop draggable-candy ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-chips" class="objectdrop draggable-chips ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-basmati" class="objectdrop draggable-basmati ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-broccoli" class="objectdrop draggable-broccoli ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-salad" class="objectdrop draggable-salad ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-garbanzos" class="objectdrop draggable-garbanzos ui-widget-content"></div></div></div>
                <div class="row"> 
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-burguer" class="objectdrop draggable-burguer ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-donuts" class="objectdrop draggable-donuts ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-diamond-ring" class="objectdrop draggable-diamond-ring ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-iphone" class="objectdrop draggable-iphone ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-coche" class="objectdrop draggable-coche ui-widget-content"></div></div>
                <div class="col-md-1 col-xs-offset-1"><div id="draggable-reloj" class="objectdrop draggable-reloj ui-widget-content"></div></div>
                </div>

                <div id="droppable-sal" class="droppable droparea-sal ui-widget-header"><p>Saludable</p></div>
                <div id="droppable-noeat" class="droppable droparea-noeat ui-widget-header"><p>No comestible</p></div>
                <div id="droppable-nosal" class="droppable droparea-nosal ui-widget-header"><p>No saludable</p></div>


        </div>

JQuery code

function changeZIndex(div) {
  var maxZIndex = 0;
    $('.objectdrop').each(function() {
        if(this.style.zIndex > maxZIndex)
            maxZIndex = parseInt(this.style.zIndex);
    });
    $(div).css('z-index', (maxZIndex + 1));
}

    // You can also use "$(window).load(function() {"   
$( document ).ready(function() {
    $('.objectdrop').on('dragstop', function(event, ui) {
      $(this).ClassyWiggle('stop');
              $(this).removeClass('boxshadow');
        });
    $('.objectdrop').on('dragstart', function(event, ui) {
        $(this).ClassyWiggle('start');
      $( ".droppable" ).removeClass( "ui-state-highlight" )
     $( "#droppable-sal" ).text('Arrastrar y soltar si crees 1')
          $( "#droppable-noeat" ).text('Arrastrar y soltar si crees 2')

     $( "#droppable-nosal" ).text('Arrastrar y soltar si crees 3')

      $(this).addClass('boxshadow'); 
             changeZIndex(this);
    });
    $('.objectdrop').mousedown(function() {
        changeZIndex(this);
    });
    idobjectdrop = $(this).attr('rel');
  $('.objectdrop').hover(function () {
    $('.ui-draggable').css( "cursor", "move" );

          });

        $("#draggable-candy, #draggable-chips, #draggable-basmati, #draggable-salad, #draggable-broccoli, #draggable-donuts, #draggable-diamond-ring, #draggable-iphone, #draggable-reloj, #draggable-coche, #draggable-garbanzos, #draggable-burguer").draggable({ revert: "invalid", containment: "#content"});

    $("#droppable-sal").droppable({
                accept: "#draggable-basmati",
                accept: "#draggable-broccoli",
                accept: "#draggable-salad",
                accept: "#draggable-garbanzos",             
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function(event, ui) {
        }
    });

    $("#droppable-noeat").droppable({
                        accept: "#draggable-iphone",
                        accept: "#draggable-reloj",
                        accept: "#draggable-diamond-ring",
                        accept: "#draggable-coche   ",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
        }
    });

    $("#droppable-nosal").droppable({
                accept: "#draggable-chips",
                accept: "#draggable-candy",
                accept: "#draggable-burguer",
                accept: "#draggable-donuts",

        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
        }
    });

Answer 1

You can use comma separated classes in accept

$("#droppable-noeat").droppable({
     accept: "#draggable-iphone, #draggable-reloj" 
})

Answer 2

Old question, but maybe this can be useful to someone.

You cannot set the same property multiple times like this

$("#droppable-noeat").droppable({
                        accept: "#draggable-iphone",
                        accept: "#draggable-reloj",
                        accept: "#draggable-diamond-ring",
                        accept: "#draggable-coche   " ...

because just the last one will be really used.

In this case, you can use a function to determine when a draggable is accepted (ES2015 syntax).

$('#some-destination').droppable({
        accept(dragabble) {
          const validClasses = ['valid-class-1', 'valid-class-2', 'valid-class-3'];
          let isValid = false;
          validClasses.forEach((c) => (isValid = draggable.hasClass(c) ? true : isValid));
          return isValid;
        }
});