title: jQuery Droppable: Only allow element to drop, if there is no other element in that dropzone
body: <p>I'm writing a puzzle, where you have to drag an item into the correct dropzone. </p>
  
  <p>Problem: I want that you can only drag an item into a dropzone, if that dropzone does not contain any other items. How can I check, whether there are no other items in that dropzone?</p>
  
  <p>Here is a gif of my current puzzle:
  <a href="https://i.stack.imgur.com/MY84O.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MY84O.gif" alt="enter image description here"></a></p>
  
  <p>Here is a gif which shows the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/EtGyl.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EtGyl.gif" alt="enter image description here"></a></p>
  
  <p>As you can see, I can drag multiple items into the same dropzone.</p>
  
  <p>If a dropzone already contains an item, the user should not be able to drop another item into that dropzone. How do I achieve that?</p>
  
  <p>My script so far:</p>
  
  <pre><code>        $( ".draggable" ).draggable({ revert: 'invalid', snap: ".dropfield", snapTolerance: 30, snapMode: "inner"});
  
          $( ".dropfield" ).droppable({
              accept: ".dropling",
              drop: function( event, ui ) {
  
                if(some-condition){ // if correct word got dragged into the correct dropzone
                    var id = ui.draggable.attr('id');
                    $("#" + id).draggable( 'disable' );
                    $(this).droppable( 'disable' );
                    $("#" + id).css( "background-color", "#7FFF00");
              }
          });
  </code></pre>
  
  <p>Html-excerpt:</p>
  
  <pre><code>&lt;div id="liebe" class="dropling draggable text-center"&gt;
    Liebe
  &lt;/div&gt;
  
     &lt;span class="dropfield" value="scheitern"&gt;
  
      &lt;/span&gt;
  </code></pre>
  
  <p>PS: There are already several topics on Stack-Overflow with the same question. However, I'm not intelligent enough to apply the suggested answers to my case. Please help me.</p>
  
  <p>Edit1</p>
  
  <p>Here is a gif which shows my preferred behavior:</p>
  
  <p><a href="https://i.stack.imgur.com/8YMzH.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8YMzH.gif" alt="enter image description here"></a></p>
  
  <p>I dragged a wrong word into a dropzone. But as long that dropzone is occupied by a word, no other words should be able to be dropped into that dropzone.</p>
  
  <p>My current code:</p>
  
  <pre><code>            if(some-condition){ //correct word
  
  
                  $("#" + id).draggable( 'disable' );
                  $(this).droppable( 'disable' );
                  $("#" + id).css( "background-color", "#7FFF00");
  
                  }
              } else { //wrong word
                  console.log("wrong word dropped");
                  $(this).droppable( 'disable' );
              }
  </code></pre>
  
  <p>As soon as I drag the wrong word out of the dropzone, the dropzone should become enabled again. But how can I achieve that?</p>