Как сделать эту «шторку» адаптивной, чтобы можно было использовать на смартфонах?

Question

[Robot439]

Здравствуйте!
В общем на десктопе все отлично работает, однако при адаптиве, то есть взаимодействию тачпадом, работать все перестает.
Вот ссылка на рабочий код для десктопа https://codepen.io/Icat/pen/EGXByp
ГЛАВНЫЙ ВОПРОС:
Как сделать, чтобы это корректно работало с тачпадом?
Дальше описываю как я пытался бороться с проблемой.

КАК Я ТАНЦЕВАЛ С БУБНОМ:
Попробовав сделать при помощи метода touchmove работать стало некорректно:
-"шторка" начинает сдвигаться только на определенной ширине экрана никак не привязываясь к родителю, как это было с методом mousemove
серая точка это точка указывает текущее положение "тача"


вот код:

$(function(){
	$(".parent").on("touchmove", function(event){
		var touch = event.originalEvent.touches[0];
		var x = touch.screenX;
		$(".two").css("width", x + 'px');
	})
});

Помучив немного гугл я понял, что это обычная проблема данного метода, и в качестве решения этой проблемы пришлось немного расширить код, однако помогло это лишь отчасти:
-все работает, но только если данная полоса занимает 100% ширины экрана. Если же есть какие-то отступы то все снова ломается:
серая точка это точка указывает текущее положение "тача"


вот код:

$('.parent').bind('touchmove',function(e){
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      var elm = $(this).offset();
      var x = touch.pageX - elm.left;
      var y = touch.pageY - elm.top;
      if(x < $(this).width() && x > 0){
          if(y < $(this).height() && y > 0){
                $(".two").css("width", touch.pageX + 'px');
          }
      }
});

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



Отсюда если взять ширину всего экрана монитора и вычесть из нее ширину всей полоски, а после разделить на два, то мы получим значение этого самого левого отступа. Далее при расчете ширины остается только из touch.pageX вычесть данное значение. Но такое решение выглядит не очень привлекательно, и мне кажется что должно быть что-то более легче..

Прошу людей с опытом, помочь решить данную головную боль.

Answer 1

[Марат Гарифуллин]

Такое?

$('.parent').bind('touchmove',function(e) {
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
  var position = $(this).offset();
  var maxWidth = $(this).width();
  var x = touch.pageX - position.left;
  if (0 <= x && x <= maxWidth) $(".modal").width(x);
});

Comments

[Robot439]

Оно!
Огромное вам спасибо.

[Павел Корнилов]

magarif, +1
Тогда, получается, что для полной обработки и мыши, и тачскрина можно сделать как-то так?


https://codepen.io/KorniloFF/pen/pqwMxm?editors=1111

[Марат Гарифуллин]

Для движения мышью и тачем

$('.parent').on('touchmove mousemove',function(e) {
  e.preventDefault();
  const touch = e.originalEvent.touches && e.originalEvent.touches[0] ||
              e.originalEvent.changedTouches && e.originalEvent.changedTouches[0] ||
              e.originalEvent;

  var x = touch.pageX - $(this).offset().left;
  if (0 <= x && x <= $(this).width()) $(".modal").width(x);
});