Sortable JS Empty container issue

Can't drag and drop in an empty container

by superhead

HTML

<script src="https://raw.githack.com/RubaXa/Sortable/master/Sortable.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HELLO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>

  <body>
    <div id="items-container">
      <div class="draggable">hello</div>
      <div class="draggable">hi</div>
      <div class="draggable">hahaha</div>
      <div class="draggable">hmmm</div>
    </div>
    <div id="private-container-dropzone">
      <div class="draggable">hihihi</div>
    </div>
    <div id="political-container-dropzone">
    </div>
  </body>

</html>

CSS

#items-container {
  background-color: blue;
  min-height: 100px;
  min-width: 100px;
  display: flex;
  flex-wrap: wrap;
}

#private-container-dropzone {
  background-color: green;
  min-height: 200px;
  min-width: 300px;
  display: flex;
}

#political-container-dropzone {
  background-color: red;
  min-height: 200px;
  min-width: 300px;
  display: flex;
}

.draggable {
  padding: 1%;
  background-color: white;
  margin: 1%;
}

JavaScript

var cont = document.getElementById('items-container');
var pvt = document.getElementById('private-container-dropzone');
var pol = document.getElementById('political-container-dropzone');

Sortable.create(cont, {
  animation: 50, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".draggable", // Restricts sort start click/touch to the specified element
  draggable: ".draggable", // Specifies which items inside the element should be sortable
  onUpdate: function(evt /**Event*/ ) {
    var item = evt.item; // the current dragged HTMLElement
  },
  onMove: function(evt /**Event*/ ) {
    var item = evt.item; // the current dragged HTMLElement
    console.log(evt);
  }
});
Sortable.create(pvt, {
  animation: 50, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".draggable", // Restricts sort start click/touch to the specified element
  draggable: ".draggable", // Specifies which items inside the element should be sortable
  onUpdate: function(evt /**Event*/ ) {
    var item = evt.item; // the current dragged HTMLElement
  },
  onMove: function(evt /**Event*/ ) {
    var item = evt.item; // the current dragged HTMLElement
    console.log(evt);
  }
});
Sortable.create(pol, {
  animation: 50, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".draggable", // Restricts sort start click/touch to the specified element
  draggable: ".draggable", // Specifies which items inside the element should be sortable
  onUpdate: function(evt /**Event*/ ) {
    var item = evt.item; // the current dragged HTMLElement
  },
  onMove: function(evt /**Event*/ ) {
    var item = evt.item; // the current dragged HTMLElement
    console.log(evt);
  }
});