使用angularjs上的dragular移动滚动

时间:2017-01-03 09:22:44

标签: javascript angularjs dragular

滚动浏览移动浏览器时遇到问题。页面将显示图像列表,用户可以拖放以重新排列图像的顺序,但滚动页面时出现问题,而不是滚动,它只是在图像之间切换位置(拖放)行动。这是我的插件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);
    });
  }
})();

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

1 个答案:

答案 0 :(得分:0)

我在这里看到三种可能的解决方案。 最简单的方法是在用户可以移动触摸的一侧留下一些空白区域而不与项目交互。 更好的解决方案是在项DEMO上创建一些处理程序。 或者第三种解决方案,如您所述,您可以延迟执行更具挑战性的解决方案。可以通过使用浏览器计时器和movesdrag.start属性阻止拖动来完成。但我没有这个演示,它将是你的自定义解决方案。