Question

我正在使用自举手风琴和角度拖放codef0rmer drag and drop

单独地，它们工作正常，但是我遇到了一个错误，如果我有一个元素展开，我向下滚动，然后将一个拖动器拖放到手风琴元素上方的一个可放置的拖放器上，我得到两滴，一个用于可见droppable和一个用于向上滚动的droppable，但在可见的droppable下。今天晚些时候我会把小提琴放在一起，但是现在，我只是试着说明这个问题：

droppable element //1

expanded accordion of droppable elements below

  droppable element //2

  droppable element //3

  droppable element //4

当事情像这样布局时，一切都运转正常。我可以将拖拽拖放到四个元素中的任何一个上，没有问题。但是如果我滚动，使得元素2,3或4在元素1的“下面”，则两个元素1和让我们说元素3将接收掉落。如何使“下面”的元素忽略掉落？我已经尝试在指令的link函数中添加$ observe，它创建了droppable元素（2,3,4），但是我尝试过的所有属性（显示，可见性）都没有改变。其他DnD选项似乎也没有提供太多帮助。

我知道这可能很难想象，我会在几个小时内整理一个小提琴以进一步说明问题，但我现在必须转向其他事情。

这是我的代码：

标记

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

运行代码并向上滚动项目列表。然后将一个拖动拖动到'Droppable Item'上。您将收到两个警报。一个用于'Droppable Item'，另一个用于listItem。当它被隐藏在'Droppable Item'下时，我试图排除listitem上的drop。

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手风琴，拖放效果很好

1 个答案: