防止具有多个掉落元素的容器

Question

如何防止可丢弃的容器（假设我有4个可丢弃的容器和4个可拖动的元素）。我想确保如果我将一个元素放到一个容器上，我就不能将另一个元素放在同一个容器上。那可能吗 ？？？在练习结束时以任何方式读取哪个容器具有哪个元素？

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//numbers.sort( function() { return Math.random() - .5 } );

for (var i = 0; i < 4; i++) {
  // alert(i)
  $('#card' + numbers[i]).data('number', numbers[i]).draggable({
    containment: '#content',
    stack: '#cardPile div',
    cursor: 'move',
    snap: '#cardSlots',
    snapMode: 'inner',
    snapTolerance: 10,
    create: function() {
      $(this).data('position', $(this).position())
    },
    start: function() {
      $(this).stop(true, true)
    },
    revert: function(dropped) {
      var $draggable = $(this),
        hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
        wasJustDropped = dropped && dropped[0].id == "droppable";
      if (wasJustDropped) {
        // don't revert, it's in the droppable
        return false;
      } else {
        if (hasBeenDroppedBefore) {
          // don't rely on the built in revert, do it yourself
          $draggable.animate({
            top: 0,
            left: 0
          }, 'slow');
          return false;
        } else {
          // just let the built in revert work, although really, you could animate to 0,0 here as well
          return true;
        }
      }
    }
  });
}

// Create the card slots
var words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
for (var i = 1; i <= 4; i++) {
  $('#answer' + words[i - 1]).data('number', i).data('droppeditem', "nodrop").droppable({
    accept: '#cardPile div',
    activeClass: 'ui-state-hover',
    hoverClass: 'hovered',
    over: function(event, ui) {
      $(ui.helper).unbind("mouseup");
    },

    out: function(event, ui) {
      $(ui.helper).mouseup(function() {
        snapToStart(ui.draggable, $(this));
      });
    },
    drop: handleCardDrop
  });
}
}

function snapToMiddle(dragger, target) {
  var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
  var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
  dragger.animate({
    top: topMove,
    left: leftMove
  }, {
    duration: 600,
    easing: 'easeOutBack'
  });
}

function snapToStart(dragger, target) {
  dragger.animate({
    top: 0,
    left: 0
  }, {
    duration: 600,
    easing: 'easeOutBack'
  });
}

function handleCardDrop(event, ui) {

  var slotNumber = $(this).data('number');
  var droppeditem = $(this).data('droppeditem');
  alert($(this).attr('id'))
  var cardNumber = ui.draggable.data('number');
  alert("slot--" + slotNumber);
  alert("cal--" + cardNumber);
  alert("droppeditem--" + droppeditem);

  //snapToMiddle(ui.draggable,$(this));

  ui.draggable.addClass('correct');
  ui.draggable.draggable('enable');
  $(this).droppable('enable');
  ui.draggable.position({ of: $(this),
    my: 'left top',
    at: 'left top'
  });
  ui.draggable.draggable('option', 'revert', false);
}