![](/img/trans.png)
[英]AngularJS - ui-sortable - How to disable sorting on just one item from the sortable list?
[英]How to conditionally prevent drop item using ui-sortable in AngularJs between two lists?
我有兩個與 ui-sortable 連接的列表。 我的問題是:如果右側列表(rightModel)的一個元素具有 class 'sorted-list--unsortable',我想防止左側列表中的下降,但繼續下降到原始列表中。 我嘗試使用 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();
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.