title: Dragging item gets hidden when overflow-y is used
body: <p>I created a <strong><a href="http://jsfiddle.net/u98dtf4s/" rel="noreferrer">Fiddle</a></strong> to demonstrate the problem (also can be run inside this question, below).</p>
  
  <p>I have a sidebar of playing card images that I want to drag into a main area. The sidebar holds a lot of cards so I want it to be scrollable. However, when I give it a scroll feature, then when I drag a card, it gets hidden when I drag it out of the sidebar.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', ['ngDraggable']);
  
  app.controller('ctrl', function ($scope) {
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#gallery-container {
      overflow-y: scroll;
  }
  .card {
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="ctrl"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;div id="gallery-container"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-9"&gt;
                   &lt;h2&gt; Drop Area &lt;/h2&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I comment out overflow, like</p>
  
  <pre><code>/*overflow-y: scroll;*/
  </code></pre>
  
  <p>in the CSS, it now works.</p>
  
  <p>How can I both have a scrolling sidebar and drag items out of it?</p>