使用 angular-ui-sortable 使第二个 div 不可排序
Make second div not sortable using angular-ui-sortable
我已经实现了排序图像位置的可排序选项。
现在我已经添加了选项，如果有少于 5 张图片，我不想显示另一个 "div" 用于添加新图像。
问题是 "add new image" 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 不可排序？
如果您需要任何其他信息，请告诉我，我会提供。
我想你是指第五个 div 而不是第二个 ;-)
首先，向您的 div 添加一个您不想使其可排序的 class：
<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();
}
}
}
一个对我有用的选项就是添加一个 class 和 pointer-events: none; 属性。
所以你可以让你的 css 像：
.unsortable: {
pointer-events: none;
}
然后在您的 html 中，您可以使用条件表达式（我刚刚以这个 preventSort 变量为例）来启用或禁用排序：
<div ng-class="{'unsortable' : preventSort === true}">
我已经实现了排序图像位置的可排序选项。 现在我已经添加了选项，如果有少于 5 张图片，我不想显示另一个 "div" 用于添加新图像。 问题是 "add new image" 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 添加一个您不想使其可排序的 class：
<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();
}
}
}
一个对我有用的选项就是添加一个 class 和 pointer-events: none; 属性。
所以你可以让你的 css 像：
.unsortable: {
pointer-events: none;
}
然后在您的 html 中，您可以使用条件表达式（我刚刚以这个 preventSort 变量为例）来启用或禁用排序：
<div ng-class="{'unsortable' : preventSort === true}">