Показать сообщение отдельно
  #3 (permalink)  
Старый 08.09.2022, 15:00
Аватар для Alikberov
Кандидат Javascript-наук
Отправить личное сообщение для Alikberov Посмотреть профиль Найти все сообщения от Alikberov
 
Регистрация: 16.08.2018
Сообщений: 109

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>
Ответить с цитированием