JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body>
  <div id="wrapper">
    <div id="from">
      <p>Namen Spelers</p>
      <ul id="draggable">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
        <li>eight</li>
        <li>nine</li>
      </ul>
    </div>
    <div id="to">
      <div>
        <p>Poule 1</p>
        <ul name="dz1" class="droppable">
        </ul>
      </div>
      <div>
        <p>Poule 2</p>
        <ul name="dz2" class="droppable">
        </ul>
      </div>
      <div>
        <p>Poule 3</p>
        <ul name="dz3" class="droppable">
        </ul>
      </div>
      <div>
        <p>Poule 4</p>
        <ul name="dz4" class="droppable">
        </ul>
      </div>
      <div>
        <p>Poule 5</p>
        <ul name="dz5" class="droppable">
        </ul>
      </div>
      <div>
        <p>Poule 6</p>
        <ul name="dz6" class="droppable">
        </ul>
      </div>
      <div>
        <p>Poule 7</p>
        <ul name="dz7" class="droppable">
        </ul>
      </div>
      <div>
        <p>Poule 8</p>
        <ul name="dz8" class="droppable">
        </ul>
      </div>
    </div>
  </div>
</body>

CSS

#from {
  float: left;
  width: 18%;
  border: 1px solid #999;
}

#from ul {
  height: 300px;
  line-height: 25px;
  vertical-align: middle;
  padding: 2px;
  overflow-y: auto;
  margin-top: 0px;
  width: 98%;
}

#from ul li {
  list-style-type: none;
  background-color: #CACAEC;
  height: 25px;
  border: 1px solid #000;
  padding: 2px;
  margin-bottom: 2px;
  cursor: ew-resize;
  color: #0B0C0C;
}

#from p {
  font-weight: bold;
  color: #FFF;
  background-color: #317082;
  padding-left: 1%;
  margin-top: 0px;
  margin-bottom: 0px;
}

#to {
  float: left;
  width: 61%;
}

#to div {
  float: left;
  margin-right: 3%;
  margin-left: 3%;
  margin-top: 0px;
  margin-bottom: 70px;
  border: 1px solid #999;
  background-color: #8FBC8F;
  width: 16%;
}

#to div p {
  margin: 0px;
  padding: 0px;
  padding-left: 12px;
  font-weight: bold;
  background-color: #317082;
  color: #FFF;
  margin-bottom: 5px;
  text-align: center;
}

#to div ul {
  margin-left: 10px;
}

#to ul {
  width: 88%;
  height: 122px;
  border: 0px;
  margin-bottom: 0px;
  overflow: hidden;
  padding: 2px;
}

#to div li {
  list-style-type: none;
  font-size: 0.75vw;
  height: 20px;
  border: 1px solid #000;
  background-color: #CACAEC;
  padding: 2px;
  margin-bottom: 2px;
  color: #0B0C0C;
  cursor: ew-resize;
}

.highlight {
  border: 1px solid red;
  background-color: lightgreen;
}

JavaScript

$(".droppable,#draggable").sortable({
  connectWith: ".droppable,#draggable",
  placeholder: "highlight",
  start: function (event, ui) {
    ui.item.toggleClass("highlight");
  },
  over: function(event, ui) {
    if ($(this).closest("ul").prop("id") == "draggable") {
      $(ui.placeholder).css('display', '');
    } else {
      var item = $(ui.item);
      var from = item.parent().is("#draggable");
      if (from && $(this).children().length > 1) {
        $(ui.placeholder).css('display', 'none');
      } else {
        $(ui.placeholder).css('display', '');
      }
    }
  },
  stop: function (event, ui) {
    var item = $(ui.item);
    var to = item.parent().is(".droppable");
    var siblingsCount = item.siblings().size();
    if (to && siblingsCount > 3) {
      return false;
    }
    ui.item.toggleClass("highlight");
  }
});