quiero mover mi div "robot" donde hice clic, así que escribí un código javascript:
document.addEventListener('mousedown', function(event) { let robot = document.querySelector('.robot'); robot.clientTop = event.pageX + 'px'; robot.clientLeft = event.pageY + 'px'; }); .robot { background-color: rgb(10, 0, 143); height: 120px; width: 120px; border-radius: 15px; margin: 25px auto; } <div class="robot"> <span class="eyes_left"> </span> <span class="eyes_right"> </span> <div class="hands"> </div> <div class="battery"> <div class="charge"> </div> <div class="charge"> </div> <div class="charge"> </div> <div class="charge"> </div> </div> </div>pero no funciona y no dice ningún error ¿cuál es el problema?
Desafortunadamente, no puede configurar clientTop de la forma en que lo ha intentado. Necesitas usar css para ajustar la posición. Proporcione la posición del elemento: absoluta y luego actualice la posición superior e izquierda en el javascript.
document.addEventListener('mousedown', function(event) { let robot = document.querySelector('.robot'); robot.style.top = event.pageY + 'px'; robot.style.left = event.pageX + 'px'; }); .robot { background-color: rgb(10, 0, 143); height: 120px; width: 120px; border-radius: 15px; margin: 25px auto; position: absolute; } <div class="robot"> <span class="eyes_left"> </span> <span class="eyes_right"> </span> <div class="hands"> </div> <div class="battery"> <div class="charge"> </div> <div class="charge"> </div> <div class="charge"> </div> <div class="charge"> </div> </div> </div>Usa este método.
let robot = document.querySelector('.robot'); document.addEventListener('mousedown' , function (event){ let y = event.pageY + 'px'; let x = event.pageX + 'px'; robot.setAttribute('style', `top: ${y}; left: ${x}`); console.log(`Position Updated, top: ${y}; left: ${x}`) }); .robot{ background-color: rgb(10, 0, 143); height:120px; width:120px; border-radius:15px; position: relative; } <div class="robot"> <span class="eyes_left"> </span> <span class="eyes_right"> </span> <div class="hands"> </div> <div class="battery"> <div class="charge"> </div> <div class="charge"> </div> <div class="charge"> </div> <div class="charge"> </div> </div> </div>https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft
clientTop y clientLeft son propiedades de solo lectura