接受多個元素可放置的jQuery UI

Question

多虧了JQuery UI，我使用了droppable和draggable。我有一個項目列表，總共9個。 一共有三個可投放框，三個進入box1，另外三個元素進入box2，另外三個進入box3。 但是我發現，當將正確的物品放入包裝盒時，我無法丟棄其他兩個正確的物品，因為只能接受一個！ 如何解決這個問題，讓我們不僅丟掉三個項目？ HTML結構：

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

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

舊問題，但這也許對某人有用。

您不能像這樣多次設置相同的屬性

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

因為只有最后一個會被真正使用。

在這種情況下，您可以使用函數來確定何時接受可拖動對象（ES2015語法）。

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

Answer 2

您可以在接受中使用逗號分隔的類

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