Move the item left to the left with the mouse cursor

Question

There are a number of elements that go beyond the boundaries of their parent, when you click on the mouse, you need to make them start to move left / right, write this code, when moving in one direction, the elements are moved to the right place, but when we change direction, then all elements still continue to move in the original direction until the mouse cursor reaches the position in which it was clamped.

The task is that as soon as the cursor changes direction, the direction of movement of the elements also changes.

I understand that it is necessary to track whether the previous mouse_x(n) position is larger than the current mouse_x(n+1) mouse_x(n) position or not, depending on this, perform the function, but did not understand how to implement it

 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>

Accepted Answer · 2016-11-27T08:45:33

In order for the element to start moving in the other direction when the direction of movement of the mouse changes, you need to track this change. To do this, we introduce two variables: direction, the direction itself, and prev_x, the previous value of the mouse position. By comparing the current and previous mouse placement, we can find out the direction of movement (increased — to the right, true, decreased, to the left, false). If the current direction is not equal to that saved in direction, this is the beginning of the new movement of the elements, therefore startx = current x.

 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>

How does the given example differ from the code in the question?
When you change the direction of movement in x changes the direction of displacement.

Move the item left to the left with the mouse cursor

1 answer 1

More articles: