Jump to content
Search Community

endDrag() Uncaught TypeError: undefined is not a function

CV-Gate test
Moderator Tag

Go to solution Solved by Rodrigo,

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

Please, could you tell me what I'm doing wrong on the stopDrag function?
 

var wall = Draggable.create(".wall", {type:"x,y", edgeResistance: 1, bounds: "body", throwProps:true, onThrowUpdate: stopDrag, onDrag: stopDrag});
function stopDrag(){
  if (($('.wall').height() - (($('.wall').position().top)*-1) - $( window ).height()) <= 0 ){
    wall.endDrag();
  }
}
 

 

As you could see in the attached Codepen, I'm trying to make a large draggable object having the document body as bounds. It's working fine except when dragging all the way up. It's going out of the bottom limit (I think this is normal, as the document.body shouldn't have a height limit) and that's why I'm calculating the point where it should stop in the stopDrag function.

 

I don't know exactly how I should call endDrag(), in the docs I can read that I have to return the event that initiated the drag event but I think it's not clear enough. By now, I'm getting: endDrag() Uncaught TypeError: undefined is not a function

 

If you could tell me how I can properly call endDrag() it would be great. Also if you know a better approach to prevent dragging out of the bottom (when dragging up and before white background appears, it should stop).

 

Thanks.

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

Link to comment
Share on other sites

  • Solution

Hi,

 

Basically this is a syntax issue.

 

Keep in mind that a Draggable instance returns an array of objects. If you attach the following code you'll see it in the console:

console.log(wall);

Basically you have to reference the first element of the array:

wall[0].endDrag();

Although this creates quite a mess in your scenario (at least the codepen you posted), you should review your code and conditional logic.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Yup, Rodrigo, is right.

 

But just to clarify, its the Draggable.create() method that returns an Array of Draggables, even if there is only 1 target passed in, in your case the ".wall" selector only matches 1 element. 

 

So if you want wall to just be 1 Draggable, you could initially do

 

var wall = Draggable.create(".wall", {type:"x,y", 
                                      edgeResistance: 1, 
                                      bounds: "body", 
                                      throwProps:true, 
                                      onThrowUpdate: stopDrag, 
                                      onDrag: stopDrag
                                     }
                           )[0]; //return only the first item in the array (with an index of 0)

However you really don't need a direct way to reference the individual Draggable instance because inside each callback (onDrag, onThrowUpdate, etc) the keyword this refers to the instance that is using that callback.

 

I forked your demo and added the ThrowProps script

 

var wall = Draggable.create(".wall", {type:"x,y", 
                                      edgeResistance: 1, 
                                      bounds: "body", 
                                      throwProps:true, 
                                      onThrowUpdate: stopDrag, 
                                      onDrag: stopDrag,
                                      onPress: press
                                     }
                           );
function stopDrag(){
/* if (($('.wall').height() - (($('.wall').position().top)*-1) - $( window ).height()) <= 0 ){
wall.endDrag();
  }  */
}


function press() {
  console.log(this) // the Draggable instance that you pressed
  console.log(wall) //an array of Draggables
  console.log(wall[0]) // the first Draggable in the Array of Draggables 
}

Notice I added an onPress callback to show what this, wall, and wall[0] are. 

 

http://codepen.io/GreenSock/pen/JLBwe?editors=001

 

 

  • Like 3
Link to comment
Share on other sites

Thanks a lot for your answers. I understand now how it works.

 

However, you are right, the code is not working as expected. What I'm trying to do is something like this: 

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

 

But with the nice draggable tweens.

 

I also updated the original Codepen to get an idea of the desired effect. It's basically like a map navigation effect.

 

Do you know if it's possible to do it with draggable? Maybe with different bounds values?

 

Thanks!

 

 

 

Link to comment
Share on other sites

Well, I think that I got it and it's working very smooth (I don't know why but in the Codepen tweens are not working...)

 

$(function(){
  var minx = ($('.wall').width() - $(window).width())* -1;
  var miny = ($('.wall').height() - $(window).height())* -1;
  var wall = Draggable.create(".wall", {type:"x,y", edgeResistance: 1, bounds: ({minX: minx, minY:miny, maxX:0, maxY:0}), throwProps:true });
  $(window).resize(function () { 
    var minx = ($('.wall').width() - $(window).width())* -1;
    var miny = ($('.wall').height() - $(window).height())* -1;
    wall[0].applyBounds({minX: minx, minY:miny, maxX:0, maxY:0});
  });
});

 

Thanks!

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.
×
×
  • Create New...