Set drag fluid

[cleveradvertising]

Hello,

 

I have a problem with a draggable fluid.

 

The codpen demo is 

 

 

What i want its when i move the box to up or down and when i drag he continuation the animation smoth and fluid, but now have a litle spike.

 

Someone can help me?

 

Thanks

 

 

See the Pen qqBNJE by cleveradvertising (@cleveradvertising) on CodePen

[OSUblake]

I showed you the basis for doing that in this post.

http://greensock.com/forums/topic/15370-draggable-choose-choose-only-move-to-down/?p=66819

 

The only way to really to keep the momentum going is by using a dummy draggable object, a proxy. It not actually part of the DOM. It's the same thing I've done in these examples...

See the Pen ZOgGXB by osublake (@osublake) on CodePen

See the Pen wWMYXZ?editors=0010 by osublake (@osublake) on CodePen

 

.

[cleveradvertising]

ok, i will see if i can do what i want. But one question:

 

Its possible change the distance to less where i drag and he snap?

 

Like i have in my demo bot with the throwProps: true, because i need drag more then 50% of window.

[OSUblake]

Maybe you can try something like this. Change the draggable based on the direction you are dragging. It's not perfect, and needs a way to control the z-index while dragging up, but it's a good start.

See the Pen 965b8ad168edf55377fd619831a6abd6?editors=0010 by osublake (@osublake) on CodePen

[cleveradvertising]

That what i try find for my project. Thanks. I ask you for a thing.

 

When drag the block for he do the action snap top or bottom, i need drag to the middle of window i can control this? where distance i want to do the snap?

 

Thanks for your helping.

[OSUblake]

Why would you snap it to the middle? Look at it in full screen. Isn't that what you were trying to do?

See the Pen e83cec88a729a5bedb96124bbc443d72?editors=0010 by osublake (@osublake) on CodePen

 

The snap is caculated in the snapY function. 

function snapY(y) {
        
  // If last page, return 0
  if (lastPage) {
    return 0;
  }
    
  // Else, round the distance
  return round(y, snapDist);    
}

If you want it to snap the middle of the window, it would be like this...

function snapY(y) {
        
  // If last page, return 0
  if (lastPage) {
    return 0;
  }
    
  // Else, round the distance
  return round(y, snapDist / 2);    
} 

.

[cleveradvertising]

You understand wrong, so

 

What i want its when you dragEnd, but now if i drag with the block to middle of window he snap to top, but i want change where the snap goes on, like a 20% of page and now its 50%. Maybe its a resistente i didn't find nothing in forum like this. But you understand now?

[OSUblake]

You can control where it snaps. The snapDist is the screen height, so multiply that by whatever.

return round(y, snapDist * 0.5); // 50%
return round(y, snapDist * 0.25); // 25%
return round(y, snapDist * 0.1); // 10%

if you want more control, you can use the .getDirection() method to manage the snapping behavior. Something like this...

function snapY(y) {
        
  if (lastPage) {
    return 0;
  }
           
  var direction = this.getDirection("velocity");
  var draggingUp = direction.indexOf("up") > -1;
  var draggingDown = direction.indexOf("down") > -1;
        
  // Run your logic here
  if (draggingUp) {
      
    if (y < -snapDist * 0.5) return -snapDist;
    else if (...) return ...    
    else return ...
      
  } else if (draggingDown) {
      
    if (y > -snapDist * 0.5) return 0;
    else if (...) return ...
    else return ...
      
  } else {
      return round(y, snapDist);
  }     
}

.

[cleveradvertising]

Its work thanks, one more thing its possible know what block is active or not?

 

When end animation top or down i can do what block is active? or add some class to this block?

[OSUblake]

I'm setting a variable in the onPress callback...

onPress: function() {      
  currentDraggable = this;
}

So you could do something like this...

onPress: function() {
  $(currentDraggable.target).removeClass("active");
  currentDraggable = this;
  $(this.target).addClass("active");
}

You can also get the element from outside of the createDraggable function by accessing that variable.

var element = $(currentDraggable.target);

And if you don't want the draggable to change the z-index, add this to the config. You may need to reorder some things though.

var draggable = new Draggable(page, {
  zIndexBoost: false,
  ...
});

.

[cleveradvertising]

Thats it, thanks for everything. Best Regards.

[cleveradvertising]

Hello, sorry but its possible create mousewhell / keydown keyup and do the animation in this code? i try create a solution but it conflicts with the code i have.