Question

我已经实现了可排序选项来排序图像位置。现在我已添加选项，如果有少于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中添加一个您不想进行排序的类： <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

对我有用的一个选项就是添加一个具有<body> <div class="container"> <div class="cent"> <div class="content"> <div class="links theme"> <div class="header"> <h1>kakarotten</h1> <table> <tr> <th> <a href="http://boards.4chan.org/a/">/a/</a> </th> <th> <a href="http://boards.4chan.org/a/">/a/</a> </th> <th> <a href="http://boards.4chan.org/a/">/a/</a> </th> <th> <a href="http://boards.4chan.org/a/">/a/</a> </th> <th> <a href="http://boards.4chan.org/a/">/a/</a> </th> </tr> <tr> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> </tr> <tr> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> </tr> </table> </div> </div> <div class="picture1 theme"></div> <div class="picture2 theme"></div> <div class="gsearch theme"></div> <div class="ysearch theme"></div> </div> </div> </div> </body>属性的类。

所以你可以让你的css像：

pointer-events: none;

然后在你的html中，你可以有一个条件表达式（我只是以这个preventSort变量为例）来启用或禁用排序：

.unsortable: { pointer-events: none; }

使用angular-ui-sortable使第二个div不可排序

2 个答案: