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.

Bob van Luijt · Accepted Answer · 2016-02-07 12:17:25Z

2

+50

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

answered Feb 7, 2016 at 12:17

Bob van Luijt

7,67815 gold badges64 silver badges108 bronze badges

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

6 Comments

Valor_ Over a year ago

well, here is a thing. It's still sortable :) I already had similar implementation. I was thinking i was doing something wrong, but it looks like the implementation was correct and problem remains somewhere else. The only thing that is currently working is "global" option under $scope.sortableOptions { disabled: true and this option removes sorting for all images

Bob van Luijt Over a year ago

Hmm, would you mind adding your example here: jsbin.com/?html,js,output (or here: jsfiddle.net) that makes it easier to help you :-)

Bob van Luijt Over a year ago

Awesome, lets fix this

Valor_ Over a year ago

HI! I somehow managed to resolve my problem. It was in mixing JQuery and Angular scripts. Cause your code is correct, i will grant bounty after one hour. Thx

Valor_ Over a year ago

almost :D there you go ;)

|

doronorenstein · Accepted Answer · 2016-11-17 22:57:50Z

0

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

answered Nov 17, 2016 at 22:57

doronorenstein

491 silver badge7 bronze badges

Collectives™ on Stack Overflow

Make second div not sortable using angular-ui-sortable

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related