Jump to content
Search Community

Overlaying Draggable - stop movement

NickNo test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • 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

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, {
		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? 

  • Thanks 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...