我正在使用angularjs-dragula,我无法自动滚动到隐藏在屏幕上的溢出容器中。
这是我的问题:
我的Dragula中有五个容器,第5个容器隐藏在屏幕上。现在,我想从第一个容器中拖动一个元素,然后将其放入第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
});
});
似乎在Dragula中未实现此选项。Dragula的开发人员建议使用模块 DOM-AUTOSCROLLER 。
在github上查看此问题:https://github.com/bevacqua/dragula/issues/121
用AngularJS实现此功能:
1)下载 DOM-AUTOSCROLLER 来自官方仓库:https://github.com/hollowdoor/dom_autoscroller/dom_autoscroller/blob/blob/master/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
}
});