Why doesn't smooth element dragging work?

Question

JavaScript

There is a block with a table with a slider. The table is initially hidden. (bottom -100%) When clicking on the button, a third of the table crawls out through the bottom calc(-100% + 300px) changes. The task is to pull the slider to pull out the rest of the table. I implemented it this way

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; // очищаем события
      };
    }

the mousedownHandler function is hung on the slider, and table is just a table wrapper that should be pulled out behind the slider. Everything seems to be working, but for some reason not smoothly, but in jerks, but I would like to smoothly.

Answer 1

Use mousemove obviously, mousedown\up only to set the fact of the click.