Jump to content
Search Community

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

Shivani Yadav test
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.

 

image.thumb.png.bc6f68413514951bf13b7c08191d68fa.png

 

 

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

Hi,

 

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

console.log(this.target.getAttribute("id"));
console.log(this.target.classList);

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:

https://greensock.com/docs/v3/Plugins/Draggable

 

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

https://greensock.com/docs/v3/Plugins/Draggable/static.hitTest()

 

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.
×
×
  • Create New...