Wie macht man jquery scroll effect wie Tumblr?

Question

Wie Sie in diesem Link sehen können: https://www.tumblr.com/explore/text Wenn wir Hashtags klicken und ziehen zu viel nach links und rechts, werden sie automatisch zurück in die ursprüngliche Position.

Jetzt kann ich meine Links, was bedeutet <ein> Elemente, nach links und rechts bewegt, aber sie können nicht in ihre ursprüngliche Position zurückgenommen werden, wenn ich zu viel ziehen. Meine Arbeit ist hier: https://codepen.io/victorcruzte/pen/oxMYJw

HTML:

<div class="parent"> 
    <div class="children"> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
    </div> 

    </div> 

CSS:

.parent { 
    margin: 200px auto; 
    width: 200px; 
    height: 100px; 
    overflow: hidden; 
    border: 1px solid #000; 
} 
.children { 
    float: left; 
    white-space: nowrap; 
} 

JS:

var x1, x2 = 0, x3; 
var click = false; 
var temp = 0, temp2, temp3 = 0; 

function draga() { 
    $('.children a').click(function(e) { 
     e.preventDefault(); 
    }); 

    $('.children').mousedown(function(e) { 
    click = true; 
    x1 = e.pageX; 
    }); 

    $(document).mouseup(function() { 
    click = false; 
    }); 

    $('.children').mousemove(function(e) { 
    if (click === false) return; 
    e.stopPropagation(); 
    (temp3 != x1) ? (temp2 = 0) : (temp2 = x2); 
    temp3 = x1; 
    x2 = e.pageX; 
    (temp2 === 0) ? x3 = (x2 - x1) : x3 = (x2 - temp2); 
    temp += x3; 
    $(this).css('background-color', 'pink'); 
    $(this).css('transform', 'translate('+ temp + 'px, 0px'); 
    }); 
}; 


$(window).load(function() { 
    draga(); 
}); 

Ich bin neu in Jquery, so hoffen, dass Sie mir helfen können . Vielen Dank!

Answer 1

Ich denke, ich habe dein Problem gelöst und hoffe, es wird dir helfen. Bitte siehe unten Code und Schnipsel:

Was Sie vermisst wurden, ist die Überprüfung, wenn die Kinder Elemente aus dem perent Element herauskommen.

var xStart = 0; 
 
var xStop = 0; 
 
var xDelta = 0; 
 

 
function draga() { 
 
    $('.children').find('a').attr('onmousedown', 'return false') 
 

 
    $('.children a').click(function(e) { 
 
    e.preventDefault(); 
 
    }); 
 

 
    $('.children').mousedown(function(e) { 
 
    xStart = e.pageX; 
 

 
    $(document).mousemove(function(e) { 
 
     xDelta = parseInt((e.pageX + xStop) - xStart); 
 
     $('.children').css('transform', 'translate(' + xDelta + 'px, 0)'); 
 
    }) 
 
    }); 
 

 
    $(document).mouseup(function(e) { 
 
    if (xDelta > 185) { 
 
\t \t \t 
 
     $({ Counter: xDelta }).animate({ Counter: 0 }, { 
 
    \t \t \t duration: 500, 
 
    \t \t \t step: function() { 
 
    \t \t \t $('.children').css('transform', 'translate('+ this.Counter +'px, 0)'); 
 
    \t \t \t } 
 
\t \t \t }); 
 
     xDelta = 0; 
 
    } else if (xDelta < -($('.children').width() - 15)) { 
 
     xDelta += Math.abs($('.children').width() - Math.abs(xDelta)) + 200; 
 
     
 
     $({ Counter: -$('.children').width() }).animate({ Counter: xDelta }, { 
 
    \t \t \t duration: 500, 
 
    \t \t \t step: function() { 
 
    \t \t \t $('.children').css('transform', 'translate('+ this.Counter +'px, 0)'); 
 
    \t \t \t } 
 
\t \t \t }); 
 
    } 
 

 
    xStop = xDelta; 
 
    $(document).off("mousemove"); 
 
    }) 
 
} 
 

 
$(window).load(function() { 
 
    draga(); 
 
});

.parent { 
 
    margin: 50px auto; 
 
    width: 200px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
} 
 

 
.children { 
 
    float: left; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <div class="children"> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    </div> 
 
</div>