draggable - Making angularjs bootstrap accordion and drag and drop play nicely -

I am using bootstrap accordion and angular drag and drop

Personally, they are okay Work, but I 've gone into a bug where I have an expansion of an element and I scroll down and then leave the draggable on a bootable top of the structure elements, I get two drops , One for the scene droppolle and one for the droppole that was scrolled But under the visible droppable I will keep a fiddle later this evening, but for now, I would just explain by giving an example of this kind of problem:

  droppable element / Expanded accordion // droppile element / 3 droppile element of droppable elements below 1 / droppable element. When things are kept like this, everything works well. . Without any problem, I can drop draggable to one of the four elements. But if I scroll, then element 2, 3 or 4 below 'element' 1, both elements, 1 and say that element 3 will get drop. How can I create an element that is 'down' that ignores the drop? I have tried to include $ $ in the link function of the instructions that make dropables (2, 3, 4), but there are no attributes (performance, visibility), which I have ever tried to make, other DND options None of the above provides much support.  
 I know that it can be difficult to imagine, I'll put a bela in a few hours to clarify the problem, but now I Other things will go on.  
> This is my code:  
 Markup  
  & lt; Span & gt; Draggables & lt; Ul & gt; & Lt; Li jqyoui-draggable data-drag = "true" ng-model = "draggables" ng-repeat = "drag in draggables" & gt; {{Drag}} & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Span & gt; & Lt; Div jqyoui-droppable = "{onDrop: 'dropcomplete (1)'}" data-drop = "true" ng-model = "list image" & gt; Droppable target & lt; / Div & gt; & Lt; Div style = "height: 100px; overflow-y: scroll;" & Gt; Compact items & lt; Ul collapse = "false" & gt; & Lt; Li jqyoui-droppable = "{onDrop: 'dropcomplete (2)'} data-drop =" true "ng-model =" list "ng-repeat =" item in list "" gt; {{Item}} & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  
 
 JS: 
 
  'Strict use'; Angular.module ('dndApp'). Controller ('aboutCtrl', function ($ radius, $ window) {$ scope.listItems = ['item 1', 'item 2', 'item 3', 'item 4', 'item 5', 'item 6' , 'Item 7', 'item 8', 'item 9']; $ scope. Draggables = ['drag1', 'drag2']; $ scope.dropComplete = function event, UI, item) {$ window. Alert (item);};});  
 
 App. JS: 
 
  'Use Strict'; Angular Modules ('dndApp', 'ngAnimate', 'ngCookies', 'ngresource', 'ngRoute', 'ngSanitize', 'ngDragDrop', 'ui.bootstrap']);  
 
 Run the code and scroll up the item list then drag a drag on 'Droppiece Item' You will get two alerts for a 'Dropple item' and one for the item item 'Dropplele item' Is hidden under 'when I am trying to exclude drop in the list. 
 

So, I was able to fix it using the following:

  var parentTop = angular.element (event.target). Parent () [0] .getBoundingClientRect (). Top; // To see if the item has been scrolled above its parents or if (Parental Tap & gt; elemTop) {// if droppable is less than another droppable, then this model container. Drag from the Spice (Container, Lang-1). , 1); } And {// do other post processing}