Question

由于JQuery UI，我使用droppable和draggable。我有一个项目列表，总共9个。有三个可投放的盒子，3个进入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" 
})

接受多个元素droppable jquery UI

2 个答案: