Drag and Drop

[jeff4gee]

I am trying to setup an animation with GSJS that allows to drag one div item over another and fires a function either on over the target object or release of draggable object on top of landing target.

 

 

Thanks for your help!

[jamiejefferson]

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 });
	}
});