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

[John Hall]

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.

 

[jamiejefferson]

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() {
  handleDragEnd(this);
}


function handleDragEnd(target) {
  console.log("X position is: " + target.x);
}

then this/target will be the draggable instance as expected.

[John Hall]

Got it!  Thanks!

 

John

[Jonathan]

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