使用angularjs-dragula的水平滚动问题

时间:2017-02-21 07:04:22

标签: angular-dragula

我使用的是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
    });
});

1 个答案:

答案 0 :(得分:2)

似乎这个选项没有在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
    }
});