<div class="wrap">
  <h1>Drag words to Empty boxes</h1>
  <div class="content">
    <div id="drop-em">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="phrase">
      <!-- remove whitespace form  inside divhtml and then we can use :empty in css to change background -->
      <div data-id="1"><span data-id="1" class="words">Is</span></div>
      <div data-id="2"><span data-id="2" class="words">tonight</span></div>
      <div data-id="3"><span data-id="3" class="words">there</span></div>
      <div data-id="4"><span data-id="4" class="words">interested in a</span></div>
      <div data-id="5"><span data-id="5" class="words">be</span></div>
      <div data-id="6"><span data-id="6" class="words">you'd</span></div>
      <div data-id="7"><span data-id="7" class="words">movie</span></div>
      <div data-id="8"><span data-id="8" class="words">chance</span></div>
      <div data-id="9"><span data-id="9" class="words">any</span></div>
      <div data-id="10"><span data-id="10" class="words">?</span></div>
    </div>
  </div>
</div>

h1 {
  text-align: center;
}
#phrase {
  margin: 10px auto;
}
#drop-em {
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 15px;
  margin: 20px auto;
  justify-content: center;
}
.words {
  cursor: move;
  transition: padding 0.5s ease;
}
.words.ui-draggable-dragging {
  background: blue;
  padding: 5px 10px;
  border-radius: 6px;
}
#phrase {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  max-width: 1080px;
  justify-content: center;
}
#phrase > div {
  margin: 0 10px 10px;
  padding: 5px 10px;
  background: #007bff;
  border: 2px solid #007bff;
  border-radius: 6px;
  color: #fff;
}
#phrase > div:empty {
  background: #fff;
  border-style: dashed;
  padding: 0px 25px;
  min-height: 30px;
}
#drop-em div {
  min-height: 20px;
  margin: 10px;
  color: #fff;
  padding: 5px 10px;
  border: 2px solid #28a745;
  border-radius: 6px;
  background: #28a745;
}
#drop-em div:empty {
  flex: 1 0 0%;
  background: transparent;
  border-style: dashed;
  min-width: 60px;
  max-width: 150px;
}

$(".words").draggable({
  revert: function (event, ui) {
    var bRevertingPhrase = this.closest("#drop-em");

    if (!bRevertingPhrase.length) {
      var phraseID = $(this).data("id");
      var phraseHomeID = $(this).parent().data("id");

      //If the child and parent ids don't match, we move the child to the correct parent
      if (phraseID !== phraseHomeID) {
        var correctCell = $("#phrase").find("div[data-id='" + phraseID + "']");
        correctCell.prepend(this);
      }
    }
    checkCorrectPhrase();
    return !event;
  }
});
$("#drop-em > div").droppable({
  drop: function (ev, ui) {
    $(ui.draggable).detach().css({ top: 0, left: 0 }).appendTo(this);
  }
});
$("#phrase > div").droppable({
  drop: function (ev, ui) {
    $(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
  }
});
function checkCorrectPhrase() {
  var thePhrase = "Is there any chance you'd be interested in a movie tonight?";
  thePhrase = thePhrase.replace(/\s/g, "");
  if ($("#drop-em").text().replace(/\s/g, "") === thePhrase) {
    alert("correct"); // just temporary
    // To do
    //set up correct modal and choose another phrase option here
  }
}