Как сделать так, чтобы элемент можно было тащить влево-вправо?

Question

[schip454]

Появилась задача реализовать свайп влево-вправо как будто перелистываешь слайдер. Смог сделать на мобильной версии, через ивент touch, но теперь не могу понять как сделать на десктопе.

window.addEventListener(
  "load",
  function () {
    const ticker = document.querySelectorAll(".ticker__item");
    const tickerHeader = document.querySelectorAll(".swiper-pagination");

    tickerHeader.forEach((item) => {
      let boxleft;
      let startx;
      let dist = 0;
      let touchobj = null;
      item.addEventListener(
        "touchstart",
        function (e) {
          touchobj = e.changedTouches[0];
          boxleft = 0;
          startx = parseInt(touchobj.clientX);
          e.preventDefault();
        },
        false
      );
      item.addEventListener(
        "touchmove",
        function (e) {
          touchobj = e.changedTouches[0];
          let dist = parseInt(touchobj.clientX) - startx;

          item.style.transform = `translateX(${boxleft + dist}px)`;
          item.style.transition = "none";

          item.click();
          item.style.color = "#000";

          document.querySelectorAll(".ticker").forEach((item) => {
            item.classList.add("stop");
          });

          e.preventDefault();
        },
        false
      );
      item.addEventListener("touchend", () => {
        item.style.transform = `translateX(0px)`;
        item.style.transition = "0.3s ease";

        item.style.color = "transparent";

        document.querySelectorAll(".ticker").forEach((item) => {
          item.classList.remove("stop");
        });
      });
    });
  },
  false
);

Answer 1

[alexalexes]

1. На десктопе рулят события мыши: mousedown - эквивалент touchstart, mousemove - эквивалент touchmove, mouseup - эквивалент touchend.
2. Вместо множества точек касаний (пальцы) у вас одна точка - курсор мыши, поэтому свойства changedTouches в объекте события не будет.
3. Тестировать, что окружение браузера имеет сенсорный экран, можно проверкой наличием доступного свойства любого события touch в window:

if("touchstart" in window)
{
  // работаем с сенсорными обработчиками
}
else
{
  // работаем с мышиными обработчиками
}

4. Событие завершения управления элементом (touchend, mouseup) лучше вешать не на сам элемент item, а на его контейнер, который будет занимать всю ширину экрана (идеально, если это будет body). Логика обработки может застрять на обработчике move, если во время движения точка воздействия на объект убежит за пределы объекта.
В определенных случаях могут выручить события mouseover/mouseout.