Как сделать расширение элемента в обе стороны с сохранением позиции?

Question

[Евгений]

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

Задача следующая:
1) Нужно сделать блок с датами
2) В видимой части показаны не все даты, не вместившиеся скрыты за горизонтальной прокруткой
3) При захвате элемента и перемещении его, блок с датами движется в стороны.

4) Над датами должен быть блок c диапазоном (с ним и вожусь)
5) Блок диапазона нужно расширять в обе стороны, при этом сохранив положение блока. То есть если увеличиваю влево, сам элемент не движется вправо и наоборот.
6) Блок с диапазоном можно перетаскивать в стороны.
7) На даты в диапазоне можно нажать, вне диапазоне клик не возможен.

HTML сделан на flexbox

.block
   .block_date 
       .block_date-item Дата 1
       .block_date-item Дата 2
   .block_range
       .block_range-handle
       .block_range-motion
            .block_range-motion-trigger#block_range-motion1
            .block_range-motion-trigger#block_range-motion2
       .block_range-handle

Пункты 1-3,7 Работают корректно
Пункты 4-5 Не могу понять как реализовать.

JS, который меняет размер элемента

var $block = $('.block');
var $eMotion = $('.block_range-motion');

function motion() {
	$block.on('mousemove', function(event) {
		var motionWidth = event.clientX - $eMotion.offset().left; 
		$eMotion.css({ 'width': motionWidth});
	});
	$block.mouseup(function() {
		$block.unbind('mousemove');
	});
}

$block.on('mousedown',  '.block_range-motion-trigger',  function() {
	motion();
});

При увеличении элемента в право все работает, но влево не получается сделать. Либо элемент уезжает вправо, либо просто уменьшается (что в общем то логично).

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

Пример для теста: https://jsfiddle.net/fervark/5738hzcL/26/

Answer 1

[Михаил Федотов]

В пункте 4 непонятно, о чем говорится. Что вы имеете в виду?

Пункт 5:
Во-первых, если вы будете осуществлять пункт 6, то нужно ловить событие onmousedown на триггерах. То есть не

$block.on('mousedown',  '.block_range-motion-trigger',  function() {
  motion();
});

а

$(".block_range-motion-trigger").on('mousedown',  function() {
  motion();
});

Во-вторых, посмотрите внимательно, вправо расширяется нормально, а влево нет по следующей причине:
$eMotion.css({ 'width': motionWidth});
Когда вы расширяете блок вправо, он увеличивает width. А когда влево, то уменьшает (логично, вроде). Но вы считаете motionWidth от начала блока, а уменьшаете влево от него и получаете отрицательные значения.

Короче, при расширении влево, значение width становится отрицательным.
А скачет при нажатии на левый триггер потому, что расчет идет с помощью координат. Левый триггер находится левее, отсчет начинается почти от начала координат. Так как триггер находится левее, блок сужается до минимального.

Ваша задача решится, как только вы начнете пересчитывать motionWidth по-другому.