Дан блок box шириной и высотой 400px, внутри которого находится зеленый квадрат шириной 50px child, необходимо при нажатии на любую область родительского блока box чтобы дочерний элемент child переместился в место клика. Запуталась в js коде.
let box = document.getElementById('box');
let child = document.getElementById('child');
child.onmousemove = funcMouse;
child.style.top = (event.clientY - 50) + 'px';
child.style.left = (event.clientX - 25) + 'px';
function funcMouse(event) {
this.innerHTML = event.clientX + ' - ' + event.clientY;
}
#box {
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
.child {
position: fixed;
width: 50px;
height: 50px;
background: green;
}
Ответ
Ошибок больше чем кода...
let box = document.getElementById('box');
// child - это class, но почему-то ты ищешь этот элемент по ID
//let child = document.getElementById('child');
let child = document.getElementsByClassName('child')[0];
//Если меняешь положение элемента по клику при чем тут событие mousemove?
box.addEventListener('click', function() {
// значения надо менять в пределах функции
child.style.top = (event.clientY - 25) + 'px';
child.style.left = (event.clientX - 25) + 'px';
child.innerHTML = event.clientX + ' - ' + event.clientY;
});
#box {
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
.child {
/* а почему не absolute раз перетаскиваешь элемент в пределах родителя */
position: fixed;
width: 50px;
height: 50px;
background: green;
/*а если еще добавть transition то переход будет плавным*/
transition: all .3s;
}
Комментариев нет:
Отправить комментарий