мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

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

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

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

:

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