Jump to content
Brickyenne

Proper use of Scope in Draggable

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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;
  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.