javascript - Dragging item gets hidden when overflow-y is used -

i created fiddle demonstrate problem (also can run inside question, below).

i have sidebar of playing card images want drag main area. sidebar holds lot of cards want scrollable. however, when give scroll feature, when drag card, gets hidden when drag out of sidebar.

var app = angular.module('myapp', ['ngdraggable']);    app.controller('ctrl', function ($scope) {      });

#gallery-container {      overflow-y: scroll;  }  .card {      width: 100%;  }

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>  <script src="https://rawgit.com/fatlinesofcode/ngdraggable/master/ngdraggable.js"></script>  <div ng-app="myapp">      <div ng-controller="ctrl">          <div class="row">              <div class="col-xs-3">                  <div id="gallery-container">                      <div class="row">                          <div class="col-sm-12">                              <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="">                          </div>                      </div>                      <div class="row">                          <div class="col-sm-12">                              <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="">                          </div>                      </div>                      <div class="row">                          <div class="col-sm-12">                              <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="">                          </div>                      </div>                      <div class="row">                          <div class="col-sm-12">                              <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="">                          </div>                      </div>                      <div class="row">                          <div class="col-sm-12">                              <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="">                          </div>                      </div>                      <div class="row">                          <div class="col-sm-12">                              <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="">                          </div>                      </div>                      <div class="row">                          <div class="col-sm-12">                              <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="">                          </div>                      </div>                  </div>              </div>              <div class="col-xs-9">                   <h2> drop area </h2>                </div>          </div>      </div>  </div>

when comment out overflow, like

/*overflow-y: scroll;*/ 

in css, works.

how can both have scrolling sidebar , drag items out of it?

to drag objects between zones scrolled or hidden overflows, need create clone div between drag div , drop div using ng-drag-clone

        <div ng-drag-clone="">             <img ng-src="{{cloneddata .link}}" width="100px">         </div> 

check fiddle

i've tried update code, demonstrate point:

---

i noticed did not create way drop zone render or store data being passed.

i created cards array , cardsdrop array store data.

i implemented ondropcomplete function push card object cardsdrop

$scope.ondropcomplete = function (data, evt) {     var index = $scope.cards.indexof(data);     if (index == -1) $scope.cardsdrop.push(data); } 

and ondragcomplete function remove card original deck (for applications, optional... want list drag not remove options):

$scope.ondragcomplete = function (data, evt) {     console.log("133", "$scope", "ondragsuccess1", "", evt);     var index = $scope.cards.indexof(data);     if (index > -1) {         $scope.cards.splice(index, 1);     } 

and used ng-repeat render each deck in drag zone

                    <div class="row" ng-repeat="card in cards">                         <img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="" vertical-scroll="false" ng-drag="true" ng-drag-data="card" ng-drag-success="ondragcomplete($data,$event)" ng-center-anchor="true" width="100px">                     </div> 

and drop zones:

        <div style="min-height: 300px;" class="col-xs-5" ng-drop="true" ng-scroll="false" ng-drag-move="true" ng-drop-success="ondropcomplete($data,$event)">             <draggableclone></draggableclone>              <h2> drop area </h2>              <div ng-repeat="card in cardsdrop" ng-drag-success="ondragcomplete($data,$event)" class="card">                 <img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" class="card" alt="" width="100px">             </div>         </div> 

---

in addition, have added styling ng-drag , ng-drop.