endDrag() Uncaught TypeError: undefined is not a function

[CV-Gate 0 Likes (Newbie)]

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

[Rodrigo 3,567 Likes (Superhero)]

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.

[Carl 9,765 Likes (Superhero)]

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

 

 

[CV-Gate 0 Likes (Newbie)]

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!

 

 

 

[CV-Gate 0 Likes (Newbie)]

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});
  });
});

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

 

Thanks!