How to use ng2-dragula and angular element resizer

user_5512319 0
Viewed 1442

I'm using Dragula for drag and drop on my tables. Also I'm using plugin angular resizier element for resizing table columns. All this I've been working in Angular2.

So what I want is this. My current situation is like this gray column on image. Whole column width is draggable and that makes me a problem when resizing column. so when I'm trying to resize my column it acts like drag and drop. I want that my colum is like this yellow one. To have some space for resizing.

And here si part of my html code:

<div class="row" [dragula]='"one-bag"' [dragulaModel]='names'>
    <div class="col" *ngFor="let name of names"
         mwlResizable
         [validateResize]="validate"
         [resizeEdges]="{right: true}"
         [enableGhostResize]="false">
         <label>{{name}}</label>
    </div>  
</div>

here is resizer I've been using. https://github.com/mattlewis92/angular-resizable-element

Question: How could I use ng2-dragula and resizer on same table columns?

ng2-dragula angular
2 Answers

You could use the moves method to only allow dragging from a certain region like this:

constructor(private dragulaService: DragulaService) {
this.dragulaService.createGroup("CARDS", {
  direction: "vertical",
  moves: (el, source, handle): boolean => handle.className.indexOf("ri-card-header") > -1
});
}

In this way you can specify a CSS selector to determine whether to allow moving or not. If the moves method returns false then the events will be forwarded and the move would not begin.

user_14679530
Related