Как сделать перемещение по странице с помощью перетаскивания?

Question

[Александр]

Чтобы можно было как бы передвигаться по странице, как на картах.
Или например как на этом сайте https://tennessine.co.uk/metro/

Answer 1

[Евгений]

События ondragstart, на тачскинах событие другое, TouchEvent.

Comments

[Александр]

А дальше что?

[DIVSIDE]

Александр, А дальше, если не знаешь js - отдавать на фриланс. А если нет денег - влажно мечтать. Тут не будет готового кода на блюдце

[Александр]

DIVSIDE, так мне и не нужен готовый код, мне нужно просто примерно хотя бы объяснить что делать и как.
И зачем мне фриланс если я пишу просто свой какой-то проект?

[DIVSIDE]

Александр, тебе дали ответ

[Евгений]

Функция из моего решения целиком для тачскрина занимает 40 строк, было бы глупо вот так взять и рассказать, вопрос о не в этом :) вот все события на которые нужно подписать выполнение функций, всё остальное можно найти в мануале по этим событиям, если вкратце, вначале перетаскивания нужно запоминать положение пальца, оно передается в событие, и положение скролла элемента который нужно "драгать", потом путём нехитрых вычислений получать расстояние на которое двигается палец и передавать в скролл:

function touchToScroll(selector) {
  const el = document.querySelector(selector);

  if (!el) return;

  let touchX,
    touchY,
    scrollLeft,
    scrollTop,
    touched = false;

  el.addEventListener("touchstart", touchIsDown);
  el.addEventListener("touchend", touchUp);
  el.addEventListener("touchcancel", touchUp);
  el.addEventListener("touchmove", touchMove);

  ...
}

Answer 2

[Сергей delphinpro]

// Реакция на нажатие мышки
document.addEventListener('mousedown', e => {
  // Запоминаем координаты мышки;
  // ...
  // Начинаем слушать перемещение
  document.addEventListener('mousemove', mousemove);
});

// Реакция на перемещение мышки
function mousemove(e) {
  // Отслеживаем координаты, сравниваем с запомненными
  // Вычисляем на сколько получилось смещение
  // Двигаем какой-то блок
}

// Реакция на отжатие мышки
document.addEventListener('mouseup', e => {
  // Отключаем прослушивание перемещения
  document.removeEventListener('mousemove', mousemove);
});

Comments

[Александр]

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

[Сергей delphinpro]

Александр, а что вы подразумеваете под перемещением по блоку?

[Александр]

Сергей delphinpro, до вашего вопроса я себе это представлял что как-бы "камера" перемещается по какому то блоку, или по странице (на подобных сайтах). А получается что мы именно этот блок просто двигаем и эффект такой же. Не задумывался раньше. То есть получается в картах такая же система? Мы не по карте перемещаемся, а двигаем карту?

[Сергей delphinpro]

Александр, да

[Александр]

Сергей delphinpro, Спасибо