Usé el código js de la web para crear un elemento arrastrable, debería aparecer cuando presiono la tecla ctrl y funcionó. Pero luego quise agregar una función para eliminarla cuando libere la tecla ctrl.

Y ahora solo crea múltiples elementos cuando sigo presionando la tecla ctrl y no hago nada cuando lo suelto.

Ayuda por favor no se que estoy haciendo mal :(

Ok, edité el código, espero que ahora se vea mejor. Lo siento, soy un novato en la programación, recién estoy comenzando, así que es por eso que mi código parece una mierda :(

Por ahora eliminé la función para Element.prototype.remove() porque no funciona de todos modos. Mi pregunta es cómo agregarlo a este código. Cómo hacer que funcione cuando suelto la tecla ctrl.

También descubrí que el código funciona no solo con la tecla ctrl, sino con cualquier tecla. Además, cuando sigo presionando cualquier tecla, sigue generando el mismo objeto una y otra vez

 window.addEventListener("keydown", function(e) { if (e.ctrlKey) var mousePosition; var offset = [0, 0]; var div; var isDown = false; div = document.createElement("div"); div.style.position = "absolute"; div.style.left = "-100px"; div.style.top = "-100px"; div.style.width = "200px"; div.style.height = "200px"; div.style.background = "rgba(255, 0, 0, 0.4)"; div.style.color = "black"; document.body.appendChild(div); div.addEventListener("mousedown",function(e) { isDown = true; offset = [div.offsetLeft - e.clientX, div.offsetTop - e.clientY]; }, true ); document.addEventListener( "mouseup",function() { isDown = false; }, true ); document.addEventListener("mousemove",function(event) { event.preventDefault(); if (isDown) { mousePosition = { x: event.clientX, y: event.clientY, }; div.style.left = mousePosition.x + offset[0] + "px"; div.style.top = mousePosition.y + offset[1] + "px"; moveX = mousePosition.x + offset[0] + "px"; moveY = mousePosition.y + offset[1] + "px"; } }, true ); });