Proper use of Scope in Draggable

[Brickyenne 3 Likes (Newbie)]

Hello,

 

I'm using Draggable with onDragEnd and onDragStart events to perform some tasks. In order to complete the onDragEnd tasks I need some variables defined inside the onDragStart function be visible inside the onDragEnd function. I see that's the purpose of onDragStartScope but it's not very explicit on how actually do that.

 

Can you clarify this a bit more please?

 

Thank you, your help will be appreciated.

[Carl 9,709 Likes (Superhero)]

I'm not quite sure how you are going to get a variable defined in 1 function to be accessible from another function. Regardless of whether or not Draggable is involved, variables defined within a function are only accessible within the scope of that function. 

 

From what I understand, the solution is to define your variable outside the onDragStart and onDragEnd functions as shown in this codepen: http://codepen.io/GreenSock/pen/nIAyg

 

(view in Chrome dev tools with console open)

 

Perhaps you can fork it or give us a better idea of how / what you are trying to accomplish. 

[Carl 9,709 Likes (Superhero)]

Update: You could attach a value to the target element of the Draggable instance and this might be a better way for both callback functions to access the same value pertinent to the Draggable instance

 

http://codepen.io/GreenSock/pen/gHJkB

 

 

var box = Draggable.create("#box", {
  onDragStart: function() {
    console.log("start", this.target.counter)
    this.target.counter ++;   
  },
   onDragEnd: function() {
    console.log("end", this.target.counter)
  }
});




box[0].target.counter = 0;