javascript - 在 AngularJS 上使用 Dragular 进行移动滚动

Question

我在移动浏览器中滚动时遇到一些问题。页面将显示图像列表，用户可以拖放来重新排列图像的顺序，但是滚动页面时出现问题，它不是滚动，而是在图像(拖放)操作之间切换位置。这是我的笨蛋sample

(function() {
  angular
    .module('app', ['dragularModule'])
    .controller('appController', ['$scope', 'dragularService', '$timeout', appController]);

  function appController($scope, dragularService, $timeout) {
    var vm = this;
    vm.items = [{
      content: 'Item 1'
    }, {
      content: 'Item 2'
    }, {
      content: 'Item 3'
    }, {
      content: 'Item 4'
    }, {
      content: 'Item 5'
    }, {
      content: 'Item 6'
    }];

    dragularService('.drag-content', {
      containersModel: vm.items,
      scope: $scope
    });

    $scope.$on('dragulardrag', function(e) {
      $timeout(function() {
        e.stopPropagation();
      }, 2);

    });
    $scope.$on('dragulardrop', function(e) {
      $timeout(function() {
        e.stopPropagation();
      }, 2);
    });
  }
})();

我的问题是，是否可以延迟拖放操作并进行滚动。

Answer 1

我在这里看到三种可能的解决方案。最简单的方法是在侧面留下一些空白空间，用户可以在不与项目交互的情况下移动触摸。更好的解决方案是对项目 DEMO 进行一些处理程序。或者第三种解决方案，您可以像您提到的那样延迟执行更具挑战性的解决方案。这可以通过使用 moves 防止拖动来完成。属性与浏览器计时器和 drag.start 的组合。但我没有这方面的演示，这将是您的自定义解决方案。