vuejs problem to init draggable.create(classname)

[mindthegap]

I done a few things with gsap in vuejs to animate simple html or svg elements.

 

Now I tried to make an drag an drop game based on this tutorial:

 

 

when I use the import Draggable I got in the VSC console the fllowing message: "export 'Draggable' was not found in 'gsap'

and I the browser console: [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'create' of undefined"  

 

here's the code

 

<script>
import {gsap , Draggable} from 'gsap'  

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    

    Draggable.create(".icon", {
       bounds:"svg",
       onPress: function(){
         console.log(this.target);
       },
       onDrag: function() {
         if (this.hitTest("#bag")) {
           gsap.to(this.target, {duration: 0.6, opacity:0, scale:0, svgOrigin:"675 143"});
         }
       }
     });
  },
}
</script>

 

where's my fault?

 

[ZachSaucier]

Hey mindthegap and welcome to the GreenSock forums. 

 

As covered in the GSAP installation docs, Draggable is a GSAP plugin that you need to include in addition to the GSAP core. So you should just need to import GSAP and Draggable like this (as covered in the installation docs):

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

// Put this inside of your mounted function
gsap.registerPlugin(Draggable);

 

[Sumeet Patel]

Hey Zach, I have tried and followed your instructions but still when there are multiple draggable items, its only let one item to drag freely.

Any advise you wanted to pass.

[Cassie]

Hey there - could you possibly make a minimal demo showing this issue?

Here's a starting point
https://stackblitz.com/edit/vue-iq1xpd?file=src/style.css

 

Thanks!

[Sumeet Patel]

I have tried to explain the issue I fall in to.
https://stackblitz.com/edit/vue-9rzyji?file=src/App.vue

 

still adding the picture where only default array object is draggable. As soon you add more items in array its stopped being draggable.

hope you will understand and try to help.
though in actual scenario I'm using Nuxt2.

[Cassie]

Sure - so mounted only runs once when the component mounts.

onUpdated is what you need. Take a look at the vue lifecycle docs - https://vuejs.org/api/options-lifecycle.html#updated

 

Hope this helps! ✨

https://stackblitz.com/edit/vue-ycsd5n?file=src%2FApp.vue

[Sumeet Patel]

Thanks you @Cassie I appreciate that you have replied so quickly. Just one thing more to ask what is the context used for in here, is it necessary to use in vue2 nuxt2 app as well. ?

[Cassie]

not 100% sure on a couple things. Will check and let you know!

[Cassie]

Just had to check that Draggables were included in the stuff that context collects up, and yes, they are 🥳

So back to your question, no, it's not "necessary"- as in - you can just kill or clean up your animations yourself. But it makes life easier.

https://greensock.com/docs/v3/GSAP/gsap.context()

context basically groups all your GSAP animations, scrollTriggers and (in this case) Draggables so that you can kill these just by calling context.revert()

 

[Sumeet Patel]

Thanks for all you revert backs. 
you solution worked for me.

Request if you can update the stackblitz by creating a dropzone where I can move object from one to another list.

https://stackblitz.com/edit/vue-plgvav?file=src/App.vue

 

few other questions:

1. how to get dragged elements object as I wanted to move that in to another list.

2. holding right click is also let the element drag, how to disable that.

3. can we also use vue-draggable with gsap draggable

[Rodrigo]

Hi,

 

As much as we love helping users We have limited time resources in the forums, so we can't tackle lists of requests for our users.

 

You might want to have a look at this:

See the Pen Pqwxvw by GreenSock (@GreenSock) on CodePen

 

As for your questions:

1. This will depend if you want to duplicate them or re-parent them. In both cases I'd use state management to keep elements in one or two lists and render the DOM accordingly using a v-for directive.
2. You can check the event type in the onClick callback and if it is the secondary mouse button stop your code or use the allow the context  menu config option from the Draggable Docs:
   allowContextMenu
   Boolean - If true, Draggable will allow context menus (like if a user right-clicks or long-touches). Normally this is suppressed because it can get in the way of dragging (especially on touch devices). Default: false.
3. I have no idea how that particular library works. I guess you could use them in different components but I'd test before using both on prduction.

Happy Tweening!