Nemanja Pavlovic Posted October 9, 2022 Share Posted October 9, 2022 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 Link to comment Share on other sites More sharing options...
akapowl Posted October 10, 2022 Share Posted October 10, 2022 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now