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

Posted 2023-05-08

【中文标题】使 angularjs bootstrap 手风琴和拖放播放得很好

【英文标题】：Making angularjs bootstrap accordion and drag and drop play nicely

【发布时间】：2015-05-20 11:29:08

【问题描述】：

我正在使用引导手风琴和角度拖放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 都会收到下降。如何使“下方”的元素忽略掉线？我尝试在创建可放置元素（2、3、4）的指令的链接函数中添加一个 $observe，但我尝试过的所有属性（显示、可见性）都没有改变。其他 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”，一个用于 listItem。当列表项隐藏在“可放置项目”下时，我正在尝试排除列表项上的放置。

【问题讨论】：

这是一个说明问题的 plunkr：plnkr.co/edit/55kngVrch1EAxbVoTRlF?p=info

【参考方案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