Valor_ Valor_ - 21 days ago 4
AngularJS Question

Make second div not sortable using angular-ui-sortable

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

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