使 angularjs bootstrap 手风琴和拖放播放效果很好

Question

我正在使用 bootstrap 手风琴和 angular 拖放 codef0rmer drag and drop

单独地，它们工作正常，但我运行遇到一个错误，如果我展开一个元素并向下滚动，然后将一个可拖动元素放到手风琴元素上方的一个可放置元素上，我会得到两个drops，一种用于可见的 droppable，另一种用于向上滚动但在可见的 droppable 下方的 droppable。我将在今晚晚些时候整理一份 fiddle，但现在，我将尝试像这样说明问题：

droppable element //1

expanded accordion of droppable elements below

  droppable element //2

  droppable element //3

  droppable element //4

当事情像这样布置时，一切正常。我可以毫无问题地将可拖动对象拖放到四个元素中的任何一个上。但是，如果我滚动，元素 2、3 或 4 是 'underneath' 元素 1，则元素 1 和元素 3 都将收到掉落。如何让 'underneath' 的元素忽略掉落？我尝试在创建可放置元素（2、3、4）的指令的 link 函数中添加一个 $observe，但是 none 的属性（显示、可见性），我尝试过任何改变。 None 的其他 DnD 选项似乎也提供了很多帮助。

我知道这可能很难形象化，我会在几个小时内整理一个 fiddle 来进一步说明问题，但我现在必须转移到其他事情上。

这是我的代码：

标记

    <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'
  ]);

运行代码并向上滚动项目列表。然后将一个 draggable 拖到 'Droppable Item' 上。您将收到两个警报。一个用于 'Droppable Item'，一个用于 listItem。当它隐藏在 'Droppable Item'.

下时，我试图排除列表项上的掉落

Answer 1

因此，我能够使用以下方法解决此问题：

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
}

使 angularjs bootstrap 手风琴和拖放播放效果很好

Making angularjs bootstrap accordion and drag and drop play nicely

draggable

angularjs