Jquery UI can't drag from left to right side
<p>On my page I'm using the <code>Jquery UI extension</code> to sort divs. The divs are arranged in 2 columns. I created a  <a href="https://jsbin.com/visozayuci/edit?html,css,output" rel="nofollow">JS Bin</a>, please take a look on it. </p>

<p>When you drag all 3 divs to the left side, you can't get them on the right side again. Where is the mistake? </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  var $grid = $('.grid').packery({
    itemSelector: '.gridItem',
    gutter: '.gridGutter',
    percentPosition: true
  });

  var $items = $grid.find('.gridItem').draggable();
  $grid.packery('bindUIDraggableEvents', $items);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0px;
  padding: 0px;
  font-family: 'Francois One', sans-serif;
  font-size: 16px;
  text-decoration: none;
}
.grid {
  width: 1000px;
  background-color: aqua;
}
.gridItem {
  width: 49%;
  background-color: coral;
}
.gridGutter {
  width: 2%;
}
@media screen and (max-width: 1000px) {
  .grid {
    width: 100%;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/packery@2.1.1/dist/packery.pkgd.min.js"&gt;&lt;/script&gt;

&lt;div class="grid"&gt;
  &lt;div class="gridGutter"&gt;&lt;/div&gt;
  &lt;div class="gridItem"&gt;div 1&lt;/div&gt;
  &lt;div class="gridItem"&gt;div 2&lt;/div&gt;
  &lt;div class="gridItem"&gt;div 3&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>