[Aetae]

<div id="block" style="width: 100px; height: 100px; background:green; transition: left 1s"></div>
<script src="https://unpkg.com/debounce"></script>
<script>
const block = document.querySelector('#block');

block.addEventListener('mousedown', function(e) {
  const shiftX = e.clientX - this.getBoundingClientRect().left;
  const self = this;
  let speed = 1;

  this.style.position = 'absolute';
  this.style.left = e.pageX - shiftX + 'px';

  const onMouseMove = debounce((e) => {
    self.style.left = e.pageX - shiftX + 'px';
  }, 300);

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

block.addEventListener('dragstart', (e) => {
  e.preventDefault();
});
</script>