Jump to content

Shivani Yadav

How to get the id/class of the dropped elements in DropArea

Moderator Tag

Recommended Posts

Hi there,


I want to implement free drag and drop functionality in my Vue project and I am able to freely move the products into the dropArea, now I will add one product-id attribute to it, can you please guide that how can I fetch id/class or any custom attribute shifted from DragArea to DropArea.





Following codepen is an implementation example, in that I want to fetch when icon option 1,2 or 3 will be there in any of the droparea, I want to get id/classes of that particular element shifted to droparea

See the Pen MWPqEQq?editors=1010 by ShivaniYadav2 (@ShivaniYadav2) on CodePen

Link to comment
Share on other sites

ClassList and className for these sections are appearing empty in the triggered event. Please check code once. 
I need specifically the elements dragged from DragArea to DropArea.

Is there any specific gsap function for this?

Link to comment
Share on other sites



I'm not completely sure that I follow what's the issue you're having, but you could add this to your onDragEnd callback:


That should give you the id and the classes the element has.


On top of that you're using GSAP/Draggable 2.  I strongly suggest you to use the latest version in order to take advantage of the latest API and all the fixes and improvements that have been added since V2.x:



One thing that should be super useful in this particular scenario is the hitTest() method:



Hopefully this helps.

Happy Tweening!

  • Like 1
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.