Seyrinian Posted November 27, 2021 Share Posted November 27, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2021 Share Posted November 27, 2021 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. Link to comment Share on other sites More sharing options...
Seyrinian Posted November 27, 2021 Author Share Posted November 27, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted November 28, 2021 Share Posted November 28, 2021 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 1 Link to comment Share on other sites More sharing options...
Seyrinian Posted November 28, 2021 Author Share Posted November 28, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
OSUblake Posted November 29, 2021 Share Posted November 29, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now