Jump to content

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

inside onDragEnd callback "this" is instance of "Window", not "Draggable"

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

When trying to access "this" inside my onDragEnd callback, the FireFox 28.0 debugger is showing "this" as an instance of "Window" instead of an instance of "Draggable" as stated in the Draggable docs.  Here's my simple codepen:


See the Pen dKEki by anon (@anon) on CodePen


... and the FireFox debugger display at a breakpoint inside the callback.



Link to comment
Share on other sites

This is because you are moving to a different scope when you call a function from inside the onDragEnd. If you use:

onDragEnd: handleDragEnd
or change to

onDragEnd: function() {

function handleDragEnd(target) {
  console.log("X position is: " + target.x);
then this/target will be the draggable instance as expected.
  • Like 3
Link to comment
Share on other sites

Just to add to Jamie's great advice.. you can also use  onDragEndScope to define the scope.


Taken from the Draggable Docs


onDragEndScope : Object - defines the scope of the onDragEnd function (what "this" refers to inside that function).



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