Перемещение блоков по клику на экран

В уроке показывается, как сделать так, чтобы по нажатию на экран в место нажатия перемещался какой-то блок. Затем задача усложняется и реализовано следующее: для перемещения вначале нужно нажать на блок, а затем на экран. Затем задача обобщается на произвольное количество блоков.

Исходники кода

.elem {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	border: 1px solid black;
}

.elem.active {
	border: 1px solid red;
}

<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>

initElems('.elem');

function initElems(selector) {
	var elems = document.querySelectorAll(selector);

	for (var i = 0; i < elems.length; i++) {
		elems[i].addEventListener('click', function(event) {
			deactivateActiveElem();
			
			this.classList.add('active');
			event.stopPropagation();
		});
	}
}

function deactivateActiveElem() {
	var activeElem = getActiveElem();
	if (activeElem) {
		deactivateElem(activeElem);
	}
}

function deactivateElem(elem) {
	elem.classList.remove('active');
}

function getActiveElem() {
	return document.querySelector('.active');
}

window.addEventListener('click', function(event) {
	var activeElem = getActiveElem();
	if (activeElem) {
		activeElem.style.left = (event.clientX - activeElem.offsetWidth / 2) + 'px';
		activeElem.style.top = (event.clientY - activeElem.offsetHeight / 2) + 'px';
		
		deactivateElem(activeElem);
	}
});

Перемещение блоков по клику на экран

Исходники кода

Смотрите также