Q:

Making angularjs bootstrap accordion and drag and drop play nicely

I'm using bootstrap accordion and angular drag and drop codef0rmer drag and drop 
Individually, they work fine, but I've run into a bug where if I have an element expanded and I scroll down and then drop a draggable onto a droppable above the accordions elements, I get two drops, one for the visible droppable and one for the droppable that has scrolled up, but under the visible droppable. I'll put together a fiddle later this evening, but for now, I'll just try and illustrate the issue like this:
droppable element //1

expanded accordion of droppable elements below

  droppable element //2

  droppable element //3

  droppable element //4

When things are laid out like this, everything works just fine. I can drop a draggable onto any of the four elements, without issue. But if I scroll, such that element 2, 3 or 4 is 'underneath' element 1, both elements, 1 and lets say element 3, will receive the drop. How can I make the element which is 'underneath' ignore the drop? I've tried adding an $observe in the link function of the directive that creates the droppable elements (2, 3, 4), but none of the attributes, (display, visibility), that I've tried ever change. None of the other DnD options seem to provide much help either. 
I know this might be difficult to visualize, I'll put together a fiddle in a couple of hours to further illustrate the problem, but I have to move to other things now.
Here's my code:
Markup
    <span>Draggables
<ul>
    <li jqyoui-draggable data-drag="true" ng-model="draggables" ng-repeat="drag in draggables">{{drag}}</li>
</ul>
</span>
<div jqyoui-droppable="{onDrop:'dropComplete(1)'}" data-drop="true" ng-model="listItems">Droppable target</div>
<div style="height: 100px; overflow-y: scroll;">Collapsible Items
    <ul collapse="false" >
        <li jqyoui-droppable="{onDrop:'dropComplete(2)'}" data-drop="true" ng-model="listItems" ng-repeat="item in listItems">{{item}}</li> 
    </ul>
</div>

js:
'use strict';

angular.module('dndApp')
  .controller('AboutCtrl', function ($scope, $window) {

    $scope.listItems = [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4',
      'Item 5',
      'Item 6',
      'Item 7',
      'Item 8',
      'Item 9'
    ];

    $scope.draggables = [
        'Drag 1',
        'Drag 2'
    ];

    $scope.dropComplete = function(event, ui, item){
        $window.alert(item);
    };
  });

app.js:
'use strict';

 angular
  .module('dndApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngDragDrop',
    'ui.bootstrap'
  ]);

Run the code and scroll the item list up. Then drag a draggable onto the 'Droppable Item'. You will get two alerts. One for the 'Droppable Item' and one for the listItem. I'm trying to exclude the drop on the listitem, when it is hidden under 'Droppable Item'.

A:

So, I was able to fix this by using the following:
var parentTop = angular.element(event.target).parent()[0].getBoundingClientRect().top;

// Check to see if the item has been scrolled above it's parent and hidden
if (parentTop > elemTop) {
    // if the droppable is below another droppable, just remove the draggable from the model
    containter.splice(container.length - 1, 1);
} else {
    // Otherwise do post processing
}

