Draggable choose choose only move to down

[cleveradvertising 1 Likes (Newbie)]

Hello, i have a problem with some action i needed to my website.

 

So, what i want its i can control the direction of draggable only to down and when i try move drag to top the section "div" doesn't move just lock.

 

But this action work in first ".post", because i have a list and i have first and last, and when the first just drag to down and last just drag to top.

 

I have this code.

 

If some one can help me with this problem i appreciate. Thanks.

var $post = $(".post");
var boxHeight = $(window).height();

var animation = TweenMax.to(".post", {
  scrollTo: {y: "+=" + boxHeight},
  ease: Power4.easeInOut,
});


Draggable.create(".post", {
	type:"y",
	cursor: "grab",
	throwProps:true,
	edgeResistance:0.7,
	dragResistance:0.3,
	maxDuration : 0.6,
	minDuration : 0.4,
	dragClickables:true,
	zIndexBoost:false,
	onClick:function() {
		console.log("Click");
		TweenLite.set(".post",{cursor:"grabbing"});
	},
	onDragStart:function() {
		TweenLite.set(".post",{cursor:"grabbing"});
		console.log("drag start");
	},
	onDragEnd:function() {
		console.log("drag ended");
	},
	onDrag: updateProgress,
	  onThrowUpdate: updateProgress,
	  snap: { 
	    y: snapY
	  }
});

				
function snapY(y) {
  return Math.round(y / boxHeight) * boxHeight;
}

function updateProgress() {  
  // var norm = normalize(this.x, xMin, xMax);
  var postfst = $(".post.active").attr('id');
  animation.progress(this.y / boxHeight);
  
}

*i cant put the full project in codepen

[OSUblake 18,491 Likes (Superhero)]

We don't want your full project in a CodePen, just a demo. But here's how you can lock the movement...

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

[cleveradvertising 1 Likes (Newbie)]

Ok i will create a simple demo with i have html css and js. because it hard for you understand what i want to do. Thanks

[cleveradvertising 1 Likes (Newbie)]

•  

  We don't want your full project in a CodePen, just a demo. But here's how you can lock the movement...

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

   

• Sorry but you can tell me some example, how to control a draggable but move other objects? Thanks.

[OSUblake 18,491 Likes (Superhero)]

This thread has some good examples of how to use a "dummy" draggable to control other elements that are part of a timeline.

http://greensock.com/forums/topic/14916-loop-draggable-carousel/

[cleveradvertising 1 Likes (Newbie)]

This thread has some good examples of how to use a "dummy" draggable to control other elements that are part of a timeline.

http://greensock.com/forums/topic/14916-loop-draggable-carousel/

 

I'll see if I can find what I want. Thank you.

 

What really want is when I make a "draggable" top down a different element move.

Basically the element I click stay fixed, and the animations are applied to the element above.

 

This is something very specific, it is the only task remaining to finish my project.

 

If you want I can create a codepen demo for you to check out better what I need.

 

Thanks for your helping.

[OSUblake 18,491 Likes (Superhero)]

If you can't figure how to do it, try to find a demo in the forums, or on CodePen that is close to what you want, and we can use that as a starting off point.

[cleveradvertising 1 Likes (Newbie)]

I've been and I'm looking for something like what I want, I think it better to make a demo and so is easier to see what I want.

[cleveradvertising 1 Likes (Newbie)]

I have now the codepen.

 

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

 

and i have the my project test online if you want i can pass to you the link.

[OSUblake 18,491 Likes (Superhero)]

So you only want to be able to drag those slides in a down direction?

[cleveradvertising 1 Likes (Newbie)]

No, this codepen don't have full animations, like scroll or drag and drop.

 

The code still in here but doesn't work every actions.

 

Can i send you the link of my website demo i work and you can see all the actions/animations?

[cleveradvertising 1 Likes (Newbie)]

I want when you try drag the block to bottom, the block u pick stay fixed, and the other block coming from top.

[OSUblake 18,491 Likes (Superhero)]

I see where you got that code from now. It's based on Chrysto's page slider...

See the Pen kDvmC?editors=0010 by bassta (@bassta) on CodePen

 

I think making that work with Draggable would require a complete rewrite. Instead of dragging the slides, you could create a simple swipe gesture using Draggable like this. It won't actually drag the slides, but on drag end it will call the a function to trigger the slide change.

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