使用angular-ui-sortable使第二個div無法排序

Question

我已經實現了用於對圖像位置進行排序的sortable選項。 現在我添加了選項，如果少於5張圖片，我將不會顯示另一個“ div”，它將用於添加新圖片。 問題是“添加新圖像” div在另一個div中

這是我的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>

這是我用於編輯產品，刪除圖像的控制器，在底部您將看到圖像排序功能，該功能需要限制添加圖像項才能排序

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

如果缺少圖像並顯示新添加的圖像，這就是我的圖像的樣子 因此，問題在於第二個div也是可排序的，但我不希望它是靜態的。 您看到第二個div無法排序的可能性嗎？ 如果您需要任何其他信息，請告訴我，我會提供。

Answer 1

我認為您是指第五個div，而不是第二個;-)

首先，在您的div中添加您不想讓其可排序的<div class="nonsortable" ng-hide="numberOfImages > 4" > ： <div class="nonsortable" ng-hide="numberOfImages > 4" > （或使用ng-class ）

您現在可以將其添加到sortableOptions

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

Answer 2

對我有用的一個選擇就是簡單地添加一個帶有pointer-events: none; 屬性。

因此，您可以將CSS設置為：

.unsortable: { pointer-events: none; }

然后在您的html中，您可以有一個條件表達式（我剛剛得到了這個preventSort變量作為示例）來啟用或禁用排序：

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