Как заставить angularjs загружать аккордеон и перетаскивать и играть красиво

Я использую бутстрап-аккордеон и угловое перетаскивание перетаскивание codef0rmer

По отдельности они работают нормально, но я столкнулся с ошибкой, из-за которой, если у меня развернут элемент, и я прокручиваю вниз, а затем перетаскиваю перетаскиваемый элемент на выпадающий над элементами аккордеона, я получаю два выпадения, одно для видимого выпадающего и одно для 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, получат падение. Как я могу заставить элемент, который находится «под», игнорировать падение? Я пытался добавить $observe в функцию ссылки директивы, которая создает удаляемые элементы (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);
    };
  });

приложение.js:

'use strict';

 angular
  .module('dndApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngDragDrop',
    'ui.bootstrap'
  ]);

Запустите код и прокрутите список элементов вверх. Затем перетащите перетаскиваемый элемент на «Выпадающий элемент». Вы получите два оповещения. Один для «Droppable Item» и один для listItem. Я пытаюсь исключить попадание в элемент списка, когда он скрыт в разделе «Выпадающий элемент».


angularjs draggable
person Lazloman    schedule 17.03.2015    source источник
comment
Вот plunkr, который иллюстрирует проблему: /а>   -  person Lazloman    schedule 24.03.2015

Ответы (1)


arrow_upward
2
arrow_downward

Итак, я смог исправить это, используя следующее:

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
}
person Lazloman    schedule 20.03.2015