CODEWITHSUNDEEP
dragulang2-dragula
MARKAND Bhatt
MARKAND Bhatt

Reputation: 2630

Dragula disable drag to reorder

I am using this awesome library for drag and drop functionality. Dragula is very good at drag and drop.

One thing I am trying to do is to disable dragging to reorder in own container. But should allow dragging if going to drop in a connected/linked container.

for example following two div tags as containers

<div dragula="dropContainer" id="dropbag1" [(dragulaModel)]="bagOneModel">
   <div *ngFor="let model of bagOneModel" class="col-sm-2 col-md-2 col-lg-2">
     {{model}}
   </div>
</div>


<div dragula="dropContainer" id="dropbag2" [(dragulaModel)]="bag2Model">
   <div *ngFor="let model of bag2Model" class="col-sm-2 col-md-2 col-lg-2">
     {{model}}
    <!-- don't allow re ordering in this container -->
   </div>
</div>

Upvotes: 0

Views: 1623

Answers (1)

kris_IV
kris_IV

Reputation: 2444

It's very easy to create something that permit to drag:

  • from A to B
  • from B to A and disable
  • reorder inside A
  • reorder inside B

In your name.component.ts you should add:

constructor(public dragulaService: DragulaService) {

    dragulaService.createGroup('dropContainer', {
        accepts: (el, target, source, sibling): boolean => {
            if (!target || !source || (target === source)) {
                 return false;
            }
            return true;
        }    
    });
}

Upvotes: 2

Related Questions