How to conditionally prevent drop item using ui-sortable in AngularJs between two lists?

Question

i have two lists connected with ui-sortable. My problem is: if an element of the right list (rightModel) has the class 'sorted-list--unsortable', i want to prevent the drop on left list, but continue to drop on the original list. I tried with ui.sender.sortable, but the following appear:

TypeError: ui.sender is null

And i really don't understand how to do it. This is the html page with the two lists:

<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">&nbsp;(*)</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>

And this is the sortable options:

    public sortableOptions = {
        connectWith: '.connector',
        disabled: false,
        stop: function(ev, ui) {
            if(ui.item.hasClass("sorted-list--unsortable")){
                ui.sender.sortable('cancel');
            }
        },
    };

D B · Accepted Answer · 2020-05-09 12:15:12Z

0

Found the solution:

    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();
        }
    }

answered May 9, 2020 at 12:15

D B

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to conditionally prevent drop item using ui-sortable in AngularJs between two lists?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related