Page scroll disabled using ng-sortable

Question

I am creating an sortable list with AngularJS and an angular library ng-sortable. The problem I am having is that on mobile devices the behaviour is inconsistent. The page does not scroll when the list is touched and moved (this is the desired behaviour) on android (chrome) but does on ipad (chrome)

I have created a simple example, in jsFiddle, with a basic example

JAVASCRIPT:

var myApp = angular.module('myApp',['ui.sortable']);

myApp.controller('MyCtrl', function($scope) {
    $scope.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];

    $scope.sortableOptions = {
      orderChanged: function (event) {
        console.log("event", event);
      }
    };
});

HTML:

<div ng-controller="MyCtrl">
<ul as-sortable="sortableOptions" ng-model="items">
    <li class="display-item" as-sortable-item ng-repeat="item in items">
        <div class="handle" >
            <div class="item-handle" as-sortable-item-handle>
                {{item}}
            </div>
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        </div>
    </li>
</ul>

CSS:

.display-item {
    clear: both;    
}

.handle {
    border: 1px solid #e5e5e5;
    padding: 10px;
    margin: 0px;
}

.item-handle {
    background: grey;
    float:left;
    padding: 2px 5px;
}

/* ************************************** */
/* Mandatory CSS required for ng-sortable */
/* ************************************** */

.as-sortable-item, .as-sortable-placeholder {
    display: block;
}

.as-sortable-placeholder {

    background: pink;
}

.as-sortable-item {
    -ms-touch-action: none;
    touch-action: none;
}

.as-sortable-item-handle {
    cursor: move;
}

.as-sortable-placeholder {
}

.as-sortable-drag {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.as-sortable-hidden {
    display: none !important;
}

Answer 1

This same issue has been logged on the ng-sortable site right here

There also is a longTouch / longTouchActive(old versions <= 1.3.2) option which you can set to true; setting to true will cause the drag and drop functionality to get activated upon long-touch aka touch-and-hold on touch devices.

Let me know if this helps on ipads, android chrome etc.

Answer 2

User better ngTable to sort tables, is more easier I think and I tested it and works correctly, you can follow here this complete example : Example

And this is the part of the code where you add the sorting of a table

function demoController(NgTableParams, simpleList) {
this.tableParams = new NgTableParams({
  // initial sort order
  sorting: { name: "asc" } 
}, {
  dataset: simpleList
});

}

But dont use simpleList, just follow the example without it and put your data instead of simpleList, afterthat, just copy the html, see how it works, and add your custom attrs, I hope I've helped you, if you have some more issues you can reply this comment :P