How can I make card elements draggable?

[Nemanja Pavlovic]

I wish when they click and hold the header with id #mydivheader they move the whole card with id #draggable. I am sending the link, so if someone can write me the code and explain how it works, I would be very grateful. The site is on webflow.

 

https://nemanjas-groovy-site.webflow.io/

See the Pen by (@) on CodePen.

[akapowl]

Hello @Nemanja Pavlovic

 

With GSAP's Draggbale it's as simple as creating a Draggable for each of your cards and using the header of each card as the trigger for the Draggable.

 

See the Pen PoexGLj by akapowl (@akapowl) on CodePen.

 

 

 

From the docs:

 

trigger

[Element | String | Object] - If you want only a certain area to trigger the dragging (like the top bar of a window) instead of the entire element, you can define a child element as the trigger, like trigger: yourElement, trigger: "#topBar", or trigger: $("#yourID"). You may define the trigger as an element or a selector string, or a jQuery object.

 

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

 

If you want your Draggables to also be throwable (like it looks to be the case on that website you linked) you will need to include the InertiaPlugin, which is a Bonus Plugin for Club-Greensock members of the ShockinglyGreen tier and above.

 

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