Jump to content
Search Community

Drag and Drop

jeff4gee test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hmm GSAP doesn't provide for any drag-and-drop functionality unfortunately. You might find something like the jQueryUI Draggable and Droppable plugins suit your purpose. I've done some drag-and-drop applications using jQueryUI and GSAP and they work very nicely together.

 

Here's a super basic way you can get smoother drag-and-drop using GSAP to tween draggable objects into position:

$('.draggables').draggable({
	revert: function(droppable) {
		if (droppable === false) {
			// Drop was rejected, tween back to original position.
			TweenLite.to(this, 0.4, { left:0, top:0 });
		}
		return false;
	}
});

$('.droppables').droppable({
	drop: function(event, ui) {
		var x = $(this).position().left;
		var y = $(this).position().top;
		TweenLite.to(ui.draggable, 0.4, { left:x, top:y });
	}
});
  • Like 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...