Skip to content

Instantly share code, notes, and snippets.

@levelsio

levelsio/dating_cards_drag_swipe_logic.js

Last active September 29, 2021 08:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save levelsio/d13ac78618f532a7325c9bf1fea107cc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save levelsio/d13ac78618f532a7325c9bf1fea107cc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. levelsio renamed this gist Nov 30, 2019. 1 changed file with 0 additions and 0 deletions.
    0 dating_cards_drag_swipe_logic.php → dating_cards_drag_swipe_logic.js
    View file
    File renamed without changes.
  2. levelsio revised this gist Nov 30, 2019. 1 changed file with 98 additions and 98 deletions.
    196 changes: 98 additions & 98 deletions dating_cards_drag_swipe_logic.php
    View file
    Original file line number Diff line number Diff line change
    @@ -3,109 +3,109 @@
    /* 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);
    $('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');
    }
    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> */
    /* <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;
    $(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');
    $('.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> */
    /* <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> */
    });
    /* </dragging logic> */
  3. levelsio created this gist Nov 30, 2019.
    111 changes: 111 additions & 0 deletions dating_cards_drag_swipe_logic.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,111 @@
    /* 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> */