Есть ряд элементов которые выходят за границы своего родителя , при нажатии на мышь, нужно сделать, чтобы они начали перемещаться вправо/влево, написал такой код, когда двигаем в одну сторону, то элементы перемещаются туда куда надо, но когда меняем направление то элементы все еще продолжают двигаться в первоначальном направлении, пока курсор мыши не дойдет до положения в котором был зажат.
Задача состоит в том, чтобы как только курсор меняет направление, то и направление движения элементов изменилось.
Понимаю, что нужно отследить больше ли предыдущее 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>