text: Q:
  
  Перемещение элемента вправо влево курсором мыши
  
  Есть ряд элементов которые выходят за границы своего родителя , при нажатии на мышь, нужно сделать, чтобы они начали перемещаться вправо/влево, написал такой
  код, когда двигаем в одну сторону, то элементы перемещаются туда куда надо, но когда меняем направление то элементы все еще продолжают двигаться в первоначальном направлении, пока курсор мыши не дойдет до положения в котором был зажат.
  Задача состоит в том, чтобы как только курсор меняет направление, то и направление движения элементов изменилось.
  Понимаю, что нужно отследить больше ли предыдущее mouse_x(n) положение текущего mouse_x(n+1) или нет, в зависимости от этого выполнить функцию, но не понял как это реализовать 
  
  position = false;
  var startx = 0;
  var starty = 0;
  var pos = $('.child').offset().left;
  var width = document.documentElement.clientWidth;
  var height = document.documentElement.clientHeight;
  i = 0; // ставлю счетчик
  function SCREENmove() {
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  
  //буду использовать в будущем чтобы запретить элементу отрываться от края экрана
    widthP = $('.parrent').width();
    widthCh = $('.child').width();
    pos = $('.child').offset().left;
    
  }
  $(window).resize(SCREENmove);
  $(document).ready(SCREENmove);
  
  $('.parrent').mousedown(function(event) {
    position = true;
    startx = event.clientX;
    starty = event.clientY;
    i = 0;
  })
  $(document).mouseup(function() {
    position = false;
  
  })
  document.onmousemove = mousemove;
  
  function mousemove(event) {
  
    if (position) {
  
      mouse_x = y = 0;
      if (document.attachEvent != null) {
        mouse_x = window.event.clientX;
        mouse_y = window.event.clientY;
      } else if (!document.attachEvent && document.addEventListener) {
        mouse_x = event.clientX;
        mouse_y = event.clientY;
      }
      mx = mouse_x - startx;
      pos = pos + mx / 40;
      i++
      console.log('pos=' + pos + '; mx=' + mx + '; i=' + (i++));
      $('.child').css('transform', 'translateX(' + pos + 'px)');
  
  
    }
  }
  .block {
    display: inline-block;
    height: 100px;
    background: #8BC34A;
    margin: 2px;
  }
  .parrent {
    display: block;
    position: relative;
    width: 600px;
    overflow: hidden;
    padding-bottom: 100px;
  }
  .child {
    display: inline-flex;
    width: auto;
    overflow: hidden;
    transform: translateX(-394px);
  }
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
  <div class="parrent">
    <div class="child onselectstart=" return false "">
      <div class="item-1 block" style="width: 100px"></div>
      <div class="item-2 block" style="width: 120px"></div>
      <div class="item-3 block" style="width: 300px"></div>
      <div class="item-4 block" style="width: 70px"></div>
      <div class="item-5 block" style="width: 150px"></div>
      <div class="item-6 block" style="width: 200px"></div>
    </div>
  </div>
  
  A:
  
  Чтобы элемент начал двигатся в другую сторону при изменении направления движения мыши, нужно это изменение отследить. Для этого мы вводим две переменные: direction, собственно направление, и prev_x, предыдущее значение положения мыши. Сравнивая текущее и предыдущее пложение мыши мы можем узнать направление движения (увеличилось- вправо, true, уменьшилось, влево, false). Если текущее направление не равно сохраненному в direction, это начало нового движения элементов, поэтому startx = текущему х.
  
  position = false;
  var startx = 0;
  var starty = 0;
  var prev_x = 0; //предыдущее значение
  var direction = true; // направление
  var pos = $('.child').offset().left;
  var width = document.documentElement.clientWidth;
  var height = document.documentElement.clientHeight;
  i = 0; // ставлю счетчик
  function SCREENmove() {
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  
  //буду использовать в будущем чтобы запретить элементу отрываться от края экрана
    widthP = $('.parrent').width();
    widthCh = $('.child').width();
    pos = $('.child').offset().left;
    
  }
  $(window).resize(SCREENmove);
  $(document).ready(SCREENmove);
  
  $('.parrent').mousedown(function(event) {
    position = true;
    startx = event.clientX;
    starty = event.clientY;
    i = 0;
  })
  $(document).mouseup(function() {
    position = false;
  
  })
  document.onmousemove = mousemove;
  
  function mousemove(event) {
  
    if (position) {
  
      mouse_x = y = 0;
      if (document.attachEvent != null) {
        mouse_x = window.event.clientX;
        mouse_y = window.event.clientY;
      } else if (!document.attachEvent && document.addEventListener) {
        mouse_x = event.clientX;
        mouse_y = event.clientY;
      }
      if (direction != (prev_x > mouse_x)) startx = mouse_x; // проверяю, изменилось ли направление, и если да, старт с этого места
      mx = mouse_x - startx;
      pos = pos + mx / 40;
      i++;
      direction = prev_x > mouse_x
      prev_x = mouse_x;
      
      console.log('pos=' + pos + '; mx=' + mx + '; i=' + (i++));
      $('.child').css('transform', 'translateX(' + pos + 'px)');
  
  
    }
  }
  .block {
    display: inline-block;
    height: 100px;
    background: #8BC34A;
    margin: 2px;
  }
  .parrent {
    display: block;
    position: relative;
    width: 600px;
    overflow: hidden;
    padding-bottom: 100px;
  }
  .child {
    display: inline-flex;
    width: auto;
    overflow: hidden;
    transform: translateX(-394px);
  }
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
  <div class="parrent">
    <div class="child onselectstart=" return false "">
      <div class="item-1 block" style="width: 100px"></div>
      <div class="item-2 block" style="width: 120px"></div>
      <div class="item-3 block" style="width: 300px"></div>
      <div class="item-4 block" style="width: 70px"></div>
      <div class="item-5 block" style="width: 150px"></div>
      <div class="item-6 block" style="width: 200px"></div>
    </div>
  </div>
  
  