Drag-and-drop. Замедлить перетаскивание элемента

[borzik2h]

Приветствую. Мне нужно замедлить перетаскивание блока. На данный момент сделал так:

<div id="block" style="width: 100px; height: 100px; background:green"></div>

<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';

  function onMouseMove(e) {
    speed = (speed <= 0.5) ? 0.5 : speed - 0.01;
    self.style.left = (e.pageX - shiftX) * speed + 'px';
  }

  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>

Но это решение кажется мне каким-то костыльным... Не знаю почему. Как можно еще решить этот вопрос?

[borzik2h]

Друзья, есть какие-нибудь идеи?

[Alikberov]

Eсть вариант, но Вам он не понравится.

<div id="block" style="width: 100px; height: 100px; background:green; position:absolute"></div>

<script>
const block = document.querySelector('#block');
block.addEventListener('mousedown', function(e) {
	var	src = e.srcElement;
	var	offset = {x: e.clientX - src.offsetLeft, y: e.clientY - src.offsetTop};
	var	timer = setInterval(MoveElement.bind(this), 100);
	var	stack = [];
	document.addEventListener("mouseup", DragFinish.bind(this));
	document.addEventListener("mousemove", DragElement.bind(this));
	e.preventDefault();
	function DragElement(e) {
		e.preventDefault();
		var	coords = {
			x: e.clientX - offset.x,
			y: e.clientY - offset.y
		};
		// Игнорируем слишком короткие перемещения
		if(stack.length == 0 || Math.max(Math.abs(coords.x - stack[0].x), Math.abs(coords.y - stack[0].y)) > 8)
			stack.unshift(coords);
	}
	function MoveElement() {
		if(stack.length > 0) {
			var pos = stack.pop();
			src.style.top = pos.y + "px";
			src.style.left = pos.x + "px";
		}
	}
	function DragFinish(e) {
		src.style.top = (e.clientY - offset.y) + "px";
		src.style.left = (e.clientX - offset.x) + "px";
		document.removeEventListener("mouseup", DragFinish.bind(this));
		document.removeEventListener("mousemove", DragElement.bind(this));
		clearInterval(timer);
	}
});
</script>

[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>

[borzik2h]

Благодарю.