1

Есть ряд элементов которые выходят за границы своего родителя , при нажатии на мышь, нужно сделать, чтобы они начали перемещаться вправо/влево, написал такой код, когда двигаем в одну сторону, то элементы перемещаются туда куда надо, но когда меняем направление то элементы все еще продолжают двигаться в первоначальном направлении, пока курсор мыши не дойдет до положения в котором был зажат.

Задача состоит в том, чтобы как только курсор меняет направление, то и направление движения элементов изменилось.

Понимаю, что нужно отследить больше ли предыдущее 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>

1 ответ 1

0

Чтобы элемент начал двигатся в другую сторону при изменении направления движения мыши, нужно это изменение отследить. Для этого мы вводим две переменные: 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>

6
  • чем приведенный пример отличается от кода в вопросе?
    – Grundy
    27 ноя 2016 в 8:46
  • При изменении направления движения по х изменяется направление смещения. 27 ноя 2016 в 8:50
  • пояснение надо добавить в сам ответ
    – Grundy
    27 ноя 2016 в 8:50
  • Не могли бы вы дать ссылку на правила, которые это требуют? 27 ноя 2016 в 8:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.