Nuxt and Resizeable/Moveable window

[Seyrinian]

Hi everyone,

I am new with gsap and I try to implement it in my nuxt app. My objective is create a component with moveable and resizeable window. I use as inspiration this topic :

And get the code of  this answer as model for my component.

My actual result is the following: https://github.com/vfourny/exemple-nuxt-gsap

But when i use the resizeable arrow, the arrow don't follow the window and I don't understand why cause I have try to clone the same code but in component logic.
You can download my exemple project and run npm start to understant my problem.

Anyone can help me to resolve this problem ?

Thanks for your help

[OSUblake]

Welcome to the forums @Seyrinian

 

Can you put what you have in a minimal demo on CodeSandbox (they have a nuxt template), and then I can fix it for you.

 

[Seyrinian]

Hi @OSUblake,

Thanks for the response and sorry, I am beginner and don't use this differents tools usually ^^

Let you check this link with a copy of my problem. It's on the index page.
As additionnal informations I used a module that simplify the installation of gasp in nuxt, but I try with normal installation on vue classic project and the result is exactly the same so maybe there is an aspect I didn't understand !

https://codesandbox.io/s/immutable-browser-7h0j3

Thanks a lot.

[OSUblake]

The problem is that you were using the event to get x and y which is not the same as this.x and this.y. There are basically two different ways to to handle this. 

 

Don't use arrow functions...

const gsap = this.$gsap;
const draggableRef = this.$refs.draggable;

this.$Draggable.create(this.$refs.resize, {
  // type: "top,left",
  onPress(e) {
    e.stopPropagation();
  },
  onDrag() {
    gsap.set(draggableRef, {
      width: this.x + 2,
      height: this.y + 2,
    });
  },
});

 

Or grab x and y from the instance...

this.handle = new this.$Draggable(this.$refs.resize, {
  // type: "top,left",
  onPress(e) {
    e.stopPropagation();
  },
  onDrag: () => {
    this.$gsap.set(this.$refs.draggable, {
      width: this.handle.x + 2,
      height: this.handle.y + 2,
    });
  },
});

 

I went with the second one as it will allow you to use this like you normally would in your component(s).

 

https://codesandbox.io/s/confident-ully-7n1ko?file=/pages/index.vue

 

 

[Seyrinian]

Oh thanks a lot this second solution is perfectly what I've needed

I have just two questions about your answer @OSUblake, I didn't understand the reason you add a +2. It's seems not working without it but why add 2 to the height and width. It's the result of other behaviour or size of other component ?

Other case, I try to fix the border of arrow resize to be at the same position always even if i add content in the draggable window, like this:

https://codesandbox.io/s/immutable-browser-7h0j3?file=/pages/index.vue

But when i pull the arrow the old problem appear again and I think it's because the .resize-handle move is x and y. Is there a method to cut the x, y transformation of this element and it's stay to the right bottom corner of my window?

I try with liveSnap to change the behaviour of x and y but not seems a good idea.

Edited November 28, 2021 by Seyrinian
don't understand the update

[OSUblake]

On 11/28/2021 at 9:26 AM, Seyrinian said:

I have just two questions about your answer @OSUblake, I didn't understand the reason you add a +2. It's seems not working without it but why add 2 to the height and width. It's the result of other behaviour or size of other component ?

 

That just has to deal with the border of the container. There is 1px on each side, so it accumulates to 2px. 

 

On 11/28/2021 at 9:26 AM, Seyrinian said:

Other case, I try to fix the border of arrow resize to be at the same position always even if i add content in the draggable window, like this:

 

You're always going to have adjust it due to the way it works. The only position you wouldn't have to adjust it is if the resize handle was at the top left corner of the container.