Mobile scroll using dragular on angularjs

Question

I have some problem when scrolling thru mobile browser. The page will display list of images, user can do drag and drop to rearrange the order of the images, but there is a problem when scrolling the page, instead of scrolling, it's just switching position between image (drag n drop) action. Here is my plunk 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);
    });
  }
})();

My question, is it possible to delay drag n drop action and do scrolling.

Answer 1

I see three possible solutions here. The easiest is to leave some blank space on side where user can move touches without interaction with items. The better solution is to make some handler on items DEMO. Or the third solution, you can do more challenging solution with delay as you mentioned. It could be done via preventing drag using moves property with combination of browser timers and drag.start. But I dont have demo for this, it would be your custom solution.