使用 ng-sortable 禁用页面滚动答案

【问题标题】：Page scroll disabled using ng-sortable使用 ng-sortable 禁用页面滚动
【发布时间】：2014-11-12 14:44:20
【问题描述】：

我正在使用AngularJS 和一个角度库ng-sortable 创建一个可排序列表。我遇到的问题是在移动设备上的行为不一致。在 android (chrome) 上触摸和移动列表时页面不会滚动（这是所需的行为），但在 ipad (chrome) 上会滚动

我在jsFiddle 中创建了一个简单的示例，其中包含一个基本示例

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;
}

【问题讨论】：

标签： javascript angularjs ng-sortable

【解决方案1】：

同样的问题已记录在 ng-sortable 网站上 right here

还有一个 longTouch / longTouchActive(old versions

如果这对 ipad、android chrome 等有帮助，请告诉我。

【讨论】：

【解决方案2】：

用户更好的 ngTable 对表格进行排序，我认为更容易，并且我对其进行了测试并且可以正常工作，您可以在此处遵循这个完整的示例：Example

这是添加表格排序的代码部分

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

}

但不要使用simpleList，只需按照没有它的示例并放置您的数据而不是simpleList，然后，只需复制html，看看它是如何工作的，然后添加您的自定义attrs，希望对您有所帮助，如果您还有其他问题可以回复此评论：P

【讨论】：