Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Overlaying Draggable - stop movement

Go to solution Solved by GreenSock,

Recommended Posts

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

  • NickNo changed the title to Overlaying Draggable - stop movement
  • Solution

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? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Yes, thats perfect thanks :)


  • Like 1
Link to comment
Share on other sites

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

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, {
		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";
	child = document.getElementById(newDiv);
	div.innerHTML = "x: " + Math.round(this.x) + "<br> y: " + Math.round(this.y);

Is that what you're looking for? 

  • Thanks 1
Link to comment
Share on other sites


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.