Has anyone created a draggable + resizable component?

[CodyBontecou]

I'm looking to create/use a draggable + resizable component with vueuse. Is this someone has done before and may be able to guide me a bit?

I've gotten useDraggable to work nicely, but am unsure how to approach the resizable side of it.

[wheatjs]

https://twitter.com/wheatjs/status/1465501514299060231

You can use useDraggable in combination with useResize to accomplish this. Since useResize is still a draft #708 you will have to include it in your project manually.

[mathsewell]

At the moment I have a method of doing this using UseDraggable and UseResizeObserver but have just seen this comment.

I can't work out how to include the useResize function manually though. Do you use an import or are you checking out the branch and including it manually in the project? I seem to have got myself stuck so any advice would be appreciated.

Thanks

[sibbng]

@mathsewell I manually create a useResize.ts with this content: https://gist.github.com/sibbng/3a5e16ed0e6ce2db7afa468cf03cd764

[mathsewell]

Thanks very much @sibbng, and thanks for the work on this.

I've got it working and definitely prefer it to using the observer. I've got one bit of slightly odd behaviour, but suspect that's UseDraggable, rather than UseResize as I can also replicate it when resizing using the css properties.

Normally it resizes without dragging, but there are some occasions (and I haven't been able to pin down yet exactly what) where it resizes and drags at the same time.

[sibbng]

@mathsewell Maybe something like this could help:

const { isOverEdge } = useResize(/* ... */)

const { x, y, style } = useDraggable(el, {
  onStart: () => !isOverEdge.value
})

[mathsewell]

Thanks very much @sibbng that's worked really well. That's a big improvement on my previous method.