Angular ui-sortable 不适用于移动设备
Angular ui-sortable not working on mobile devices
我目前正在开发一个包含一些测试的 AngularJS 应用程序。在其中一些列表中,我有一个列表,用户必须通过拖放来正确排序。
我正在使用 angular-ui-sortable 来完成它。在 PC 和笔记本电脑上它完美运行。当用户使用移动设备时,问题就来了,然后它就停止工作了。
我可以想象它与手机上的垂直滚动冲突,或者我完全错了?有没有人也遇到过这个问题并提出了解决方案?或者可能会指出正确的方向,我将非常感激。
HTML(如果需要我的html)
<ul ui-sortable ng-model="sequence" class="list-group list-group-lg list-group-sp">
<li ng-repeat="choice in choices" class="list-group-item" draggable="true">
<h5>{{choice.name}}</h5>
</li>
</ul>
根据文档和 github 存储库中打开的问题,您可以添加 jquery-ui 来解决此问题。您可以从项目自述文件中查看此 pen 以供参考。
这是笔上使用的代码:
HTML
<div class="floatleft">
<ul ui-sortable="sortableOptions" ng-model="list" class="list">
<li ng-repeat="item in list" class="item">
{{item.text}}
</li>
</ul>
</div>
控制器
$scope.sortableOptions = {
update: function(e, ui) {
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
$scope.sortingLog.push('Update: ' + logEntry);
},
stop: function(e, ui) {
// this callback has the changed model
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
$scope.sortingLog.push('Stop: ' + logEntry);
}
};
我目前正在开发一个包含一些测试的 AngularJS 应用程序。在其中一些列表中,我有一个列表,用户必须通过拖放来正确排序。
我正在使用 angular-ui-sortable 来完成它。在 PC 和笔记本电脑上它完美运行。当用户使用移动设备时,问题就来了,然后它就停止工作了。
我可以想象它与手机上的垂直滚动冲突,或者我完全错了?有没有人也遇到过这个问题并提出了解决方案?或者可能会指出正确的方向,我将非常感激。
HTML(如果需要我的html)
<ul ui-sortable ng-model="sequence" class="list-group list-group-lg list-group-sp">
<li ng-repeat="choice in choices" class="list-group-item" draggable="true">
<h5>{{choice.name}}</h5>
</li>
</ul>
根据文档和 github 存储库中打开的问题,您可以添加 jquery-ui 来解决此问题。您可以从项目自述文件中查看此 pen 以供参考。
这是笔上使用的代码:
HTML
<div class="floatleft">
<ul ui-sortable="sortableOptions" ng-model="list" class="list">
<li ng-repeat="item in list" class="item">
{{item.text}}
</li>
</ul>
</div>
控制器
$scope.sortableOptions = {
update: function(e, ui) {
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
$scope.sortingLog.push('Update: ' + logEntry);
},
stop: function(e, ui) {
// this callback has the changed model
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
$scope.sortingLog.push('Stop: ' + logEntry);
}
};