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