Skip to content

Instantly share code, notes, and snippets.

@levelsio
Last active September 29, 2021 08:28
Show Gist options
  • Save levelsio/d13ac78618f532a7325c9bf1fea107cc to your computer and use it in GitHub Desktop.
Save levelsio/d13ac78618f532a7325c9bf1fea107cc to your computer and use it in GitHub Desktop.
/* dragging logic for nomadlist.com/dating */
/* by @levelsio */
/* MIT license */
/* <dragging logic> */
$('body').on('mousedown touchstart','.card',function(e) {
if(!currentCardUserId) return;
if($('card.match_card').is(':visible')) return;
if(typeof e.originalEvent.touches !=='undefined') {
/* touch device */
draggingX=e.originalEvent.touches[0].clientX;
draggingY=e.originalEvent.touches[0].clientY;
}
else {
/* mouse device */
draggingX=e.clientX;
draggingY=e.clientY;
}
draggingCard=this;
draggingNow=true;
dragCardWidth=$('.card').width();
dragCardHeight=$('.card').height();
dragCardInitialX=$('.card').offset().left;
dragCardInitialY=$('.card').offset().top;
dragCardInitialMouseX=draggingX-dragCardInitialX;
dragCardInitialMouseY=draggingY-dragCardInitialY;
});
$('body').on('mousemove touchmove',function(e) {
if(!draggingNow) return;
if($('card.match_card').is(':visible')) return;
if(typeof e.originalEvent.touches !=='undefined') {
/* touch device */
draggingX=e.originalEvent.touches[0].clientX;
draggingY=e.originalEvent.touches[0].clientY;
}
else {
/* mouse device */
draggingX=e.clientX;
draggingY=e.clientY;
}
dragRelativeX=(draggingX-dragCardInitialX-dragCardInitialMouseX);
dragRelativeY=(draggingY-dragCardInitialY-dragCardInitialMouseY);
if(dragRelativeX<-windowWidth/4) {
$('.controls .like').removeClass('active');
$('.controls .dislike').addClass('active');
}
else if(dragRelativeX>windowWidth/4) {
$('.controls .like').addClass('active');
$('.controls .dislike').removeClass('active');
}
else {
$('.controls .like').removeClass('active');
$('.controls .dislike').removeClass('active');
}
/* <rotate card when dragging> */
rotateDeg=0;
if(dragRelativeX>0) {
rotateDeg=normalize(dragRelativeX,0,dragRelativeX+windowWidth/2)*25;
} else {
rotateDeg=-normalize(dragRelativeX,0,dragRelativeX-windowWidth/2)*25;
}
/* </rotate card when dragging> */
$(draggingCard).css('transform','translate3d('+dragRelativeX+'px,'+dragRelativeY+'px,0px) rotate('+rotateDeg+'deg)');
});
$('body').on('mouseup touchend',function(e) {
if(!currentCardUserId) return;
if(!draggingNow) return;
if($('card.match_card').is(':visible')) return;
draggingNow=false;
$('.top_card').addClass('transition');
/* <check if dragged to left/right> */
$('.controls .like').removeClass('active');
$('.controls .dislike').removeClass('active');
console.log('dragRelativeX',dragRelativeX);
if(dragRelativeX<-windowWidth/4) {
console.log('drag left');
dislike();
$('.controls .dislike').addClass('active');
setTimeout(function() {
$('.controls .dislike').removeClass('active');
},250);
return;
}
else if(dragRelativeX>windowWidth/4) {
console.log('drag right');
like();
$('.controls .like').addClass('active');
setTimeout(function() {
$('.controls .like').removeClass('active');
},250);
return;
}
else {
/* return to center */
$('.top_card').addClass('transition');
$('.top_card').css('transform','translate3d(0px,0px,0px)');
setTimeout(function() {
$('.top_card').removeClass('transition');
},125);
}
/* </check if dragged to left/right> */
});
/* </dragging logic> */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment