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

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

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

`.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); } });`

:

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

- видео
  порядковый номер клика на экран JavaScript
- видео
  введение в Drag-and-Drop native JavaScript
- видео
  стикеры на ООП с сохранением в локальное хранилище

←→
↑