1

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.

Akbar Kautsar
  • 416
  • 5
  • 13

1 Answers1

0

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.

Luckylooke
  • 4,061
  • 4
  • 36
  • 49
  • I think so, I'll try to do third solution as your suggestion. Thanks – Akbar Kautsar Jan 09 '17 at 09:53
  • @eusoj, since I move to another project, my friend continue to do on this. He seem using some blank space as recommend by Luckylooke. FYI. so far this problem, is appear, when viewing on phone, but with tablet, it's working. – Akbar Kautsar Mar 14 '17 at 03:10