angularjs - 使 angularjs bootstrap Accordion 和拖放效果很好

Question

我正在使用 bootstrap Accordion 和 Angular 拖放 codef0rmer drag and drop

就个人而言，它们工作得很好，但我遇到了一个错误，如果我展开了一个元素，然后向下滚动，然后将一个可拖动的元素拖放到 Accordion 元素上方的可放置的元素上，我会得到两滴，一滴用于可见的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 位于元素 1 的“下方”，则两个元素(1 和元素 3)都将收到掉落。如何使“下方”的元素忽略掉落？我尝试在创建可放置元素(2、3、4)的指令的链接函数中添加 $observe，但我尝试过的所有属性(显示、可见性)都没有改变。其他 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'
  ]);

运行代码并向上滚动项目列表。然后将可拖动对象拖到“可放置项目”上。您将收到两个警报。一种用于“可放置项目”，另一种用于列表项目。当列表项隐藏在“可删除项目”下时，我试图排除该列表项上的删除。

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
}