Как осуществить перемещение контента перетаскиванием мыши/слайдом по экрану?

Question

[Денис Букреев]

Как осуществить такое перетаскивание? Примерно как здесь: https://www.youtube.com/watch?v=J0u4B9lzBDw

На данный момент горизонтальный скролл организуется по отлавливанию вертикального скролла через тачпад/колесико мыши

UPD: свое решение приложил в ответ

Comments

[Pit]

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

Answer 1

[Андрей Minisol]

используйте события drag (ondragstart, ondragleave) и перемещайте влево/вправо блок с датами

Comments

[Денис Букреев]

почитал про события, думал, что все оказалось просто и обойдусь в десяток строк
но что-то в голову не заходит, как правильно реализовывать перемещение контента

т.е. надо добавлять к scrollLeft контента такое значения, чтоб иллюзорно казалось, будто передвигаешь сам контент. Но что-то не работает голова в этом плане

[Денис Букреев]

нет, все оказалось даже проще, чем я думал, когда прочитал про эти события)

Answer 2

[Денис Букреев]

Вот как я решил данную задачку (все оказалось в разы проще, чем я думал):

// timeline - блок с горизонтальным скроллом
timeline.onmousedown = () => {
  let pageX = 0;

  document.onmousemove = e => {
    if (pageX !== 0) {
      timeline.scrollLeft = timeline.scrollLeft + (pageX - e.pageX);
    }
    pageX = e.pageX;
  };

  // заканчиваем выполнение событий
  timeline.onmouseup = () => {
    document.onmousemove = null;
    timeline.onmouseup = null;
  };

  // отменяем браузерный drag
  timeline.ondragstart = () => {
    return false;
  };
};

Comments

[rmltsn]

Если отпустить мышь за пределами блока, то продолжает ездить

[OMYT]

Чтобы не продолжало ездить, нужно onmouseup привязывать не к блоку, а к документу всему.

Answer 3

[Сергей ZSA]

Это карусель. Можно попробовать сделать из вот этой: kenwheeler.github.io/slick тут есть подобное.

Comments

[Денис Букреев]

нее, это не то
надо чтобы просто контент перемещался на расстояние, пройденное мышью
а тут добавляется выравнивание по слайду