angularjs - 如何在两个列表之间有条件地防止在AngularJs中使用ui-sortable删除项目?
问题描述
我有两个与 ui-sortable 连接的列表。我的问题是:如果右列表(rightModel)的一个元素具有类“排序列表--不可排序”,我想防止左列表上的下降,但继续下降到原始列表上。我尝试使用 ui.sender.sortable,但出现以下内容:
TypeError: ui.sender is null
我真的不明白该怎么做。这是包含两个列表的 html 页面:
<div class="sortable-dual-list">
<div class="row">
<div class="col-lg-6">
<h4 class="text-left">{{ $ctrl.leftTitle | translate}}</h4>
<div class="grid-container grid-container-edit">
<div class="p-grid-row connector sortable-list" ui-sortable="$ctrl.sortableOptions" ng-model="$ctrl.leftModel" >
<div ng-repeat="company in $ctrl.leftModel">
<p>{{company.businessName}}</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<h4 class="text-left">{{ $ctrl.rightTitle | translate}} <label ng-if="$ctrl.required" class="mandatory"> (*)</label>
</h4>
<div class="grid-container grid-container-edit">
<div class="p-grid-row connector sorted-list" ui-sortable="$ctrl.sortableOptions" ng-model="$ctrl.rightModel">
<div class="p-row" ng-class="{'sorted-list--unsortable': company.industryValue === 'ACTIVE'}" ng-repeat="company in $ctrl.rightModel">
<p>{{company.businessName}} <span ng-if="$first">
(default)
</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
这是可排序的选项:
public sortableOptions = {
connectWith: '.connector',
disabled: false,
stop: function(ev, ui) {
if(ui.item.hasClass("sorted-list--unsortable")){
ui.sender.sortable('cancel');
}
},
};
解决方案
找到了解决方案:
public sortableOptions = {
connectWith: '.connector',
disabled: false,
cancel: '.sorted-list--unsortable'
update: function (event, ui) {
if (!ui.item.sortable.received &&
ui.item.sortable.source[0] !== ui.item.sortable.droptarget[0] &&
ui.item.hasClass('sorted-list--unsortable')) {
ui.item.sortable.cancel();
}
}
推荐阅读
- python - 如何重定向用户两次 - Django?
- react-google-maps - 反应谷歌地图。MarkerClusterer 自定义行为
- vue.js - 多少。使用构建工具rollupjs打包Vue项目时会产生不同后缀的js文件?
- python - Databricks 连接 java.lang.ClassNotFoundException
- github - 在 google colab 上打开一个 github 存储库
- admob - Facebook 广告的空闲状态
- c++ - 使用线程令牌进行 WMI 连接而不更改进程安全性
- python - 使用 Windows 凭据验证 Python 密码
- c# - 版本 5 中的 Xamarin.Forms CollectionView 和 IsVisible 奇怪行为
- android - 如何添加依赖项以在 Visual Studio(本机 android 应用程序)中构建 Ant?