Horizontal and vertical mouse resize of block element / flexbox with Dragula

user_3973406 0
Viewed 702

I'm trying to make the same kind of mouse resizing as the typical window resize functionality, where you can grab each of the 4 edges of an element and resize - or the corners for resizing both the width and length at the same time.

Since I'm already using Dragula for drag / drop functionality (moving items) I'd like to avoid having to use https://jqueryui.com/resizable/ for this resizing, and I feel Dragula should be able to handle this as well. But I couldn't find any info about this besides this https://github.com/bevacqua/dragula/issues/195 where the response isn't very useful at all.

It might be a stupid question, but I at least can't figure out how to implement this with Dragula, so I'm hoping one of you might be able to enlighten me. :-)

dragula resizable javascript
1 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