AngularJS - ui-sortable - How to disable sorting on just one item from the sortable list?

Question

Here is a Plunker example. [updated the plunk based on below answers]

How can I disable sorting on just one or two items. For example, item 1 and item 3, so the user can't move those two items ?

I tried

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

in sortableOptions, but that disables sorting on the whole list.

I'm looking for something like

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

Thanks.

Community · Accepted Answer · 2017-05-23 11:46:27Z

16

You can configure a class for items that should not be dragged:

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

Then conditionally add that class in 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}}

Update
You can prevent the item from being sorted like this:

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

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 25, 2014 at 17:44

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ren Over a year ago

Thanks for your answer. It works for most of the parts. But when I drag item3 and place it on top of item 2, item2 gets dropped from its original position. In my case, I only want the item1 to be fixed in a way that when the user tries to place any other items on top of item 1, sortableOptions should either trigger a sortable.cancel() or just drop the item below item 1. Here is my updated plunker. plnkr.co/edit/9W9XilAO7LS6aAhR0iXk?p=preview

António Sérgio Simões Over a year ago

Didn't get your updated answer before I posted mine...but the behavior you're getting is quite similar to what's happening on my example. For the most part it works...but if you drag Item 3...or Item 4 on top of Item 1, Item 1 is sorted down :S

j.wittwer Over a year ago

items: "li:not(.unsortable)" prevents the unsortable items from being moved.

Ren Over a year ago

I've implemented 'div:not(.unsortable)', and it works well, except when I drag item 3 and drop it just above item 2, item 1 gets pushed down, and item 3 goes to the top. I will try to figure out a way around this, but any help would be much appreciated. Thanks. Here is my new plunk. plnkr.co/edit/KkTEakiWiiTjqSSndq9j?p=preview

pradeep Over a year ago

Ok I solved it by following this, weblogs.asp.net/jeffwids/… , thanks to this blog

|

António Sérgio Simões · Accepted Answer · 2014-03-25 17:18:05Z

1

Have you tried to implement the update option?

From the ui-sortable documentation, a modified and over simplified version for your use case:

First, add a enabled property to your array:

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

and then assert it's status in the 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

answered Mar 25, 2014 at 17:18

António Sérgio Simões

9917 silver badges11 bronze badges

2 Comments

Ren Over a year ago

Thanks for your answer. Yes, I tried that too. But, it gets called only after the item is dragged. So, it still allows me to move the item from its original position. Here is the updated plunker. plnkr.co/edit/9W9XilAO7LS6aAhR0iXk?p=preview

António Sérgio Simões Over a year ago

Ah! I see. Yes, it doesn't allow you to drag it...but it can be sorted :|

Collectives™ on Stack Overflow

AngularJS - ui-sortable - How to disable sorting on just one item from the sortable list?

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related