Estoy intentando hacer que el elemento se mueva, depues de esto al darle click me muestre una barra roja arriba y que cuando se le vuelva a dar click esta desaparezca.
const div = document.getElementById("div");
const x = document.getElementById("p");
div.addEventListener("mousedown", move);
div.addEventListener("click", cli);
function move(e){
if(e.target != this)return false;
const z = e.target;
function mo(pageX, pageY){
z.style.left = pageX - z.offsetHeight /2 + 'px';
z.style.top = pageY - z.offsetHeight /2 + 'px';
}
function mov(event){
mo(event.pageX, event.pageY);
}
z.addEventListener('mousemove', mov);
z.onmouseup = function(e){
z.removeEventListener('mousemove', mov);
}
}
function cli(){
if(getComputedStyle(x).display == "none"){
x.style.display="block";
}else{
x.style.display= "none";
}
}
div{
background: green;
height: 100px;
width: 100px;
position: absolute;
top: 50%;
left: 50%;
}
p{
top: -15px;
width: 100px;
height:10px;
position: absolute;
background: red;
}
<div id="div">
<p display="none" id="p"></p>
</div>
Lo que pasa es que no se me ocurre como puedo resolver esto.
Pensé un crear una variable que almacenase un valor cunado se le haga click por primera vez y luego cambié para poder verificar si se hizo click ya cuando estba la raya roja, lo que pasa es que tendría que ser global, prefiero no usar var y si uso let la variable no se guarda(por lo de la limitación del scope). Así que descarto la idea.
Resumidendo: Quiero que al mover el elemento se quede la raya roja(si ya aparecio antes o sino que no se muestre) y que al volver a darle click aparezca la raya o desaparezca si ya apareció.
¿Se les ocurren alguna otra idea? ¿O sino y si la idea que pensé puede ser valida como crear una variable que se cree la primera vez que se ejecute el evento y luego no cambie su valor?
Muchas gracias!