2016-02-05 74 views
1

我已經實現了排序圖像位置的排序選項。 現在我添加了選項,如果有少於5個圖像,我不想另一個「div」顯示哪個將用於添加新圖像。 的問題是,「增加新形象」的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); 
         } 
        }) 
       } 
      } 

這是我的圖片看起來像如果一個人失蹤,新增加的圖像顯示 image sorter 所以問題是這個第二個div也是可排序的,但我不是靜態的。 您是否看到任何可能性使第二個div無法排序? 如果您需要任何其他信息,請讓我知道,我會提供。

回答

2

我想你所指的第五格,而不是第二;-)

首先,一類添加到您的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(); 
     } 
    } 
} 
+0

好吧,這裏是一個東西。它仍然可以排序:)我已經有類似的實現。我認爲我做錯了什麼,但看起來執行是正確的,問題依然存在。目前工作的唯一的是$ scope.sortableOptions下的「全局」選項{disabled:true,這個選項將刪除所有圖像的排序 –

+0

嗯,你介意在這裏添加你的示例:https://jsbin.com/?html ,js,輸出(或在這裏:https://jsfiddle.net),使它更容易幫助你:-) –

+0

我會做一個,直到明天。 thx求助 –

0

一種選擇是簡單地加個班與pointer-events: none;財產。

所以你可以有你的CSS是這樣:

.unsortable: { pointer-events: none; }

然後在你的HTML,你可以有一個條件表達式(我剛剛得到這個preventSort變量爲例)啓用或禁用排序:

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