Перетаскивание элемента по странице js
Данный листинг является примером работы с событиями, в данном коде реализовано перетаскивание элемента по странице js по нажатию на него мыши.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | let div = document.querySelector("div"); div.addEventListener('mousedown', function(evt) { evt.preventDefault(); // Отслеживаем начальное положение блока по его координатам let xStart = evt.clientX; let yStart = evt.clientY; var onMouseMove = function (evtMove){ evtMove.preventDefault(); // Отслеживаем изменение координат мыши var xNew = xStart - evtMove.clientX; var yNew = yStart - evtMove.clientY; xStart = evtMove.clientX; yStart = evtMove.clientY; div.style.top = (div.offsetTop - yNew) + 'px'; div.style.left = (div.offsetLeft - xNew) + 'px'; } var onMouseUp = function (evtUp){ // Отменяем подписку на события document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } document.addEventListener('mousemove', onMouseMove) document.addEventListener('mouseup', onMouseUp) }) |
25 сентября 2020 /
4074 Views /
5 комментариев