NickNo Posted August 31, 2021 Share Posted August 31, 2021 Hi, I have multiple draggables, and just wondering how to stop movement on one when another is in play. In the example - the pink timeline should drag everything on it (the dots) - but if dragging a dot, the pink timeline shouldn't move... Thanks for any advice See the Pen qBjbYPp by nickjacobsnz (@nickjacobsnz) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 31, 2021 Solution Share Posted August 31, 2021 Yeah, that's a logic thing - you've got nested draggable elements. Pressing anywhere on the parent (including on any of its children) will trigger the drag of that parent. And when the parent moves, the child moves with it. So if you're triggering both draggables by clicking on a child, the movement will compound on the child. You could probably just sense that condition and call .endDrag() on the parent like this: See the Pen JjJGZvV?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 1 1 Link to comment Share on other sites More sharing options...
NickNo Posted August 31, 2021 Author Share Posted August 31, 2021 Yes, thats perfect thanks 1 Link to comment Share on other sites More sharing options...
NickNo Posted September 7, 2021 Author Share Posted September 7, 2021 Actually, one question on this - how would I restrict the draggable movement to its parent? If I use bounds:'.timeline-year' that restricts all items to the very first timeline-year box...I thought something like 'bounds: this.target.parentNode' but that doesn't work... Link to comment Share on other sites More sharing options...
GreenSock Posted September 7, 2021 Share Posted September 7, 2021 Then you'd need to loop through each item and reference its parent in the loop: gsap.utils.toArray(".timeline-item").forEach(item => { Draggable.create(item, { type:"top,left", cursor: "pointer", bounds: item.parentNode, onDragEnd: onDragEnd }); }); // just externalize this so we can reuse the same function for all of them. function onDragEnd(e) { let newDiv = this.target.id + "Pos"; let div; el = document.getElementById(newDiv); (el !== null ? el.parentNode.removeChild(el) : (div = document.createElement("div"))); div.className = "position-info"; div.setAttribute("id",newDiv); child = document.getElementById(newDiv); this.target.appendChild(div); div.innerHTML = "x: " + Math.round(this.x) + "<br> y: " + Math.round(this.y); } Is that what you're looking for? 1 Link to comment Share on other sites More sharing options...
NickNo Posted September 7, 2021 Author Share Posted September 7, 2021 Perfect! 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