Jump to content
Search Community

remove draggable in vuejs component

mindthegap test
Moderator Tag

Recommended Posts

hi,

 

I create  a few draggable elements in the mounted script of a vue component

 

gsap.registerPlugin(Draggable);
Draggable.create(dragTicket1, {...

 

 

I thought I can remove the Draggable with Draggable.kill() inside the beforeUnmount hook of the component, but I got an error. Ok, is it necessary to remove the Draggables? Or is this handled inside the gsap?

 

Uncaught (in promise) TypeError: gsap_Draggable__WEBPACK_IMPORTED_MODULE_11__.Draggable.kill is not a function
    at Proxy.beforeUnmount (VueGame.vue?b4b8:2675:1)

 

Link to comment
Share on other sites

15 minutes ago, mindthegap said:

not working, 

 

Uncaught (in promise) TypeError: this.draggable.kill is not a function

Sorry I forgot the position 0 at the end of Draggable.create()[0]

 

See the Pen d949f79cbd73a08da5c5a8a0cde8ba64 by nicofonseca (@nicofonseca) on CodePen



I made this demo with Vue for you. If it keeps not working please provide a codepen demo with your code

  • Like 3
Link to comment
Share on other sites

When you use Draggable.create, it creates an array of Draggable instances. So if your Draggable.create call has multiple targets, you should actually loop through the array.

 

this.draggables = Draggable.create(".box");

// kill
this.draggables.forEach(d => d.kill())

 

If you only want a single Draggable, you can use the constructor.

this.draggable = new Draggable(myElement);

// kill
this.draggable.kill();

 

  • Like 2
Link to comment
Share on other sites

2 minutes ago, OSUblake said:

When you use Draggable.create, it creates an array of Draggable instances. So if your Draggable.create call has multiple targets, you should actually loop through the array.

 

this.draggables = Draggable.create(".box");

// kill
this.draggables.forEach(d => d.kill())

 

If you only want a single Draggable, you can use the constructor.

this.draggable = new Draggable(myElement);

// kill
this.draggable.kill();

 

I learn something new every day. Thanks @OSUblake 💚

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...