Question

这是Plunker example。 [根据以下答案更新了plunk]

如何禁用一两项的排序。例如，第1项和第3项，因此用户无法移动这两项？

我试过

   $scope.sortableOptions = {
       disabled:true,
   };

在sortableOptions中

，但禁止对整个列表进行排序。

我正在寻找像

这样的东西

  <div ui-sortable="sortableOptions" ng-model="list">    
  <div ng-repeat="item in list">    
    <div ng-switch on="item.text">    

      <div ng-switch-when="Item 1" >    
        <div ui-sortable="sortableOptions.disabled=true">{{item.text}} - Sorting disabled</div>    
      </div>  

     <div ng-switch-default>    
        <div>{{item.text}} - Sorting enabled</div>    
      </div>  

    </div>    
  </div>    
</div>

感谢。

Answer 1

您可以为不应拖动的项目配置类：

$scope.sortableOptions = {
cancel: ".unsortable",

然后在ngRepeat中有条件地添加该类：

<ul ui-sortable="sortableOptions" ng-model="list" class="list">
  <li ng-repeat="item in list" class="item"  
      ng-class="{'unsortable': item.text == 'Item 2'}">
    {{item.text}}

<强>更新
您可以阻止对项目进行排序，如this：

$scope.sortableOptions = {
cancel: ".unsortable",
items: "li:not(.unsortable)",

Answer 2

您是否尝试过实施更新选项？

从ui-sortable文档中，为您的用例修改和简化版本：

首先，在您的数组中添加一个enabled属性：

    for (var i = 1; i <= 6; i++){
        tmpList.push({
          text: 'Item ' + i,
          value: i,
          enabled: true
        });
      }

然后在sortableOptions中声明它的状态：

    $scope.sortableOptions = {
      update: function(e, ui) {
        if (ui.item.scope().item.enabled === false) {
          ui.item.sortable.cancel();
   }}};

https://github.com/angular-ui/ui-sortable

AngularJS - ui-sortable - 如何禁用可排序列表中的一个项目的排序？

2 个答案: