Make second div not sortable using angular-ui-sortable

Question

I have implemented sortable option for sorting image positions. Now i have added option if there are less then 5 images, i wan't another "div" to show up which will be used to add new image. The problem is that "add new image" div is in another div

This is my HTML

<div ui-sortable="sortableOptions" ng-model="images" style="overflow:auto; margin:0 auto;">
  <div ng-repeat="i in images track by $index | orderBy:'position'">
    <figure>
          <div class="photoframe with_buttons relative shadow r_corners wrapper">
            <img src="images/products/{{i.thumbName}}" alt="{{product[0].name}}" class="tr_all_long_hover" >
            <div class="open_buttons clearfix">
                 <div>
                      <a ng-click="removeImage(product[0].id_product, i.id_image, product[0].alias)" role="button">
                         <i class="fa fa-trash-o"></i>
                      </a>
                 </div>
            </div>
          </div>
    </figure>
  </div>
  <div ng-hide="numberOfImages > 4" >
     <figure class="d_xs_inline_b">
           <div>
                <img src="images/file_add.png" class="tr_all_long_hover" title="Add new image" >
                     <div>
                          <div class="f_left f_size_large tr_all_hover">
                           <a ng-click="addNewImage()" role="button">
                           <i class="fa fa-arrow-circle-o-up"></i>
                           </a>
                     </div>
                </div>
            </div>
     </figure>
   </div>
</div>

And this is my controller for editing product, removing images and at the bottom you will see image sorting function, which needs restriction for add image item to be not sortable

        productsFactory.getProduct(alias).then(function(data){
                $scope.numberOfImages = Object.keys(data[0].images).length;
                $scope.images = data[0].images;
                $scope.product = data;
            })
                $scope.updateProduct = function(){
                $scope.submissionMessage = '';
                $scope.submission = false;
                $http({
                    method : 'POST',
                    url : $location.protocol() + '://' + $location.host() + '/server/api/products/update_product',
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' },
                    data : $.param({
                        id : $scope.product[0].id_product,
                        name : $scope.product[0].name,
                        description : $scope.product[0].description,
                        mainCategory : $scope.product[0].id_main_category,
                        category : $scope.product[0].id_category
                    })
                }).success(function(data){
                    if(!data.success){
                        $scope.nameError = data.errors.name;
                        $scope.descriptionError = data.errors.description;
                        $scope.mainCategoryError = data.errors.mainCategory;
                        $scope.categoryError = data.errors.category;
                        $scope.submission = true;
                    }else{
                        $scope.submission = false;
                        $scope.submissionMessage = data.messageSuccess;
                        $scope.submissionSuccess = true;
                        productsFactory.getCurrentUserProducts().success(function(data){
                            $scope.userProducts = data;
                            $timeout(function(){$scope.submissionSuccess = false;}, 2000);
                        }).error(function(data){
                            console.log("Can't fetch users products" + data);
                        })
                    }
                });
            };
            //Remove image from product
            $scope.removeImage = function(id_product, id_image, alias) {
                if ($scope.numberOfImages == 1) {
                    $scope.imgRemoveSuccessFail = true;
                    $scope.messageErrorPictureRemove =
                        "Sorry but your trading item needs at least one image. " +
                        "If you wan't to delete this one, please upload new one first!";
                    $timeout(function(){$scope.imgRemoveSuccessFail = false;}, 4000);
                } else {
                    $http({
                        method: 'POST',
                        url: $location.protocol() + '://' + $location.host() + '/server/api/products/removeImageFromProduct',
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: $.param({
                            'id_product': id_product,
                            'id_image': id_image
                        })
                    }).success(function (data) {
                        if(!data.success) {
                            $scope.imgRemoveSuccessFail = data.imgRemoveSuccessFail;
                            $scope.messageErrorPictureRemove = data.messageErrorPictureRemove;
                            $timeout(function(){$scope.imgRemoveSuccessFail = false;}, 2000);
                        }else{
                            productsFactory.getProduct(alias).then(function (data) {
                                $scope.images = data[0].images;
                                $scope.numberOfImages = Object.keys(data[0].images).length;
                            })
                        }
                    })
                }
            }
            //Sort image position
            //Disable img sorting for second div??
            $scope.sortableOptions = {
                stop: function() {
                    var pos = 0;
                    $scope.images.forEach(function(item){
                        item.position = pos;
                        pos++;
                    });
                    var id = $scope.product[0].id_product;
                    var img = JSON.stringify($scope.images);
                    productsFactory.updateImagesPosition(id, img).then(function(data){
                        if(data.data.success == true) {
                            $scope.success = data.data.success;
                            $scope.messageSuccess = data.data.messageSuccess;
                            $timeout(function(){$scope.success = false;}, 2000);
                        }else{
                            $scope.messageError = data.data.messageError;
                            $scope.fail = data.data.fail;
                            $timeout(function(){$scope.fail = false;}, 2000);
                        }
                    })
                }
            }

This is how my images looks like if one is missing and new add image is shown So the problem is that this second div is also sortable, but i wan't it to be static. Do you see any possibilities to make the second div not sortable? If you need any other information, please let me know and i will provide.

Answer 1

One option that worked for me was simply to add a class with the pointer-events: none; property.

So you could have your css be like:

.unsortable: { pointer-events: none; }

And then in your html, you could have a conditional expression (I've just got this preventSort variable as an example) to enable or disable the sorting:

<div ng-class="{'unsortable' : preventSort === true}">

Answer 2

I think you mean the fifth div instead of the second ;-)

First, add a class to your div that you don't want to make sortable: <div class="nonsortable" ng-hide="numberOfImages > 4" > (or use ng-class)

You can now add this to the sortableOptions

$scope.sortableOptions = {
    stop: function() {
        // what you already had
    },
    update: function(e, ui) {
        if (ui.item.hasClass('nonsortable')) {
          ui.item.sortable.cancel();
        }
    }
}