polyak-y
@polyak-y
Js, React.js,Vue.js,css

Почему не работает плавно перетаскивание элемента?

Есть блок с таблицей с ползунком. Таблица изначально скрыта. (bottom -100%) При клике на кнопку треть таблицы вылезает через изменения bottom calc(-100% + 300px). Задача потянув за ползунок вытаскивать оставшуюся часть таблицы. Я реализовал данным образом
mousedownHandler(event) {
      const table = this.$refs.table; // таблица
      const coordsSlider = event.target.getBoundingClientRect(); // координаты ползунка
      const difference = event.pageY - coordsSlider.top; // разница между координатами курсора и ползунка
      const currentBottomPosition = parseInt(getComputedStyle(table).bottom);

      document.onmousemove = e => {
        const delta = coordsSlider.top - e.clientY + difference + currentBottomPosition; 
        table.style.bottom = delta + "px";
      };

      document.onmouseup = () => {
        document.onmousemove = null; //очищаем события
        document.onmouseup = null; // очищаем события
      };
    }

функция mousedownHandler навешена на ползунок, а table это как раз обертка таблицв которая должна вытаскиваться за ползунком. Все как бы работает, но почему-то не плавно а рывками, а хотелось бы плавненько.
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Используй mousemove очевидно, mousedown\up только для установки факта нажатия.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы