title: Drag disappears when dragged outside of its base container
body: <p>I am making an Italian learning website, but I am having difficulties doing the dragging of flash cards out of their container, as it disappears. The website is viewable on <a href="https://breaktruth.github.io/Coniugatore-italiano/" rel="nofollow noreferrer">github pages</a> and the code viewable on <a href="https://github.com/BreakTruth/Coniugatore-italiano" rel="nofollow noreferrer">github</a>. Anyone any clue what to do?</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>interact('.flash-card').draggable({
    restrict: {
      restriction: '#main',
    },
    onmove: (event) =&gt; {
      const target = event.target;
      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  
      target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
      target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
  });
  
  interact('#main').dropzone({
    accept: '.flash-card',
    overlap: 0.6
  });</code></pre>
  </div>
  </div>
  </p>