How to make jquery scroll effect like tumblr? -

as can see in link: https://www.tumblr.com/explore/text when click , drag hashtags left , right much, automatically move original position.

now can make links, means <a> elements, moved left , right can't taken original position if drag much. work here: 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(); }); 

i'm new jquery, hope can me. thank much!

i think solved problem , hope help. please see below code , snippet:

what missing check when children elements out och perent element.

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) {  			        $({ counter: xdelta }).animate({ counter: 0 }, {    			duration: 500,    			step: function () {      			$('.children').css('transform', 'translate('+ this.counter +'px, 0)');    			}  			});        xdelta = 0;      } else if (xdelta < -($('.children').width() - 15)) {        xdelta += math.abs($('.children').width() - math.abs(xdelta)) + 200;                $({ counter: -$('.children').width() }).animate({ counter: xdelta }, {    			duration: 500,    			step: function () {      			$('.children').css('transform', 'translate('+ this.counter +'px, 0)');    			}  			});      }        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>