Проблема горизонтальной прокрутки с помощью angularjs-dragula

Question

Я использую angularjs-dragula и не могу автоматически прокрутить до контейнера переполнения, который скрыт от экрана.

Это моя проблема:
У меня в контейнере пять контейнеров, а пятый контейнер скрыт от экрана. Теперь я хочу перетащить элемент из первого контейнера и поместить его в 5-й контейнер. Но я не могу этого сделать, поскольку экран не прокручивается автоматически до 5-го контейнера.

Поддерживает ли angularjs-dragula вертикальную прокрутку? или есть свойство, которое мне не хватает?

Пример Plunkr: https://plnkr.co/edit/iD38MugmHIx298p7OlrI?p=preview

var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
    dragulaService.options($scope, 'fifth-bag', {
        copy: true
    });
});

Answer 1

Похоже, что эта опция не реализована в Dragula. Разработчик Dragula предлагает использовать модуль dom-autoscroller.

Смотрите эту проблему на Github: https://github.com/bevacqua/dragula/issues/121

Для реализации этой функциональности с AngularJS:

1) Загрузите dom-autoscroller из официального репо: https://github.com/hollowdoor/dom_autoscroller/blob/master/dist/dom-autoscroller.min.js

2) Включить его в папку вашего проекта

3) Включите автопрокрутку в вашем контроллере:

// ENABLE AUTOSCROLL FOR GOALS LIST
var scroll = autoScroll([
    document.querySelector('.list')
], {
    margin: 30,
    maxSpeed: 10,
    scrollWhenOutside: true,
    autoScroll: function () {
        //Only scroll when the pointer is down
        return this.down
    }
});