1

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!

1
  • Existe varias opciones, puedes crear un data atributo en el cual actualices el status del elemento, o puedes utilizar los atributos y ausencia de elementos, por ejemplo, si el elemento no existe (barra roja) lo creas, si el elemento existe lo ocultas, y si el elemento existe pero esta oculto (esto puede ser por una clase por ejemplo) no haces nada.
    – Reny Ramos
    Commented el 22 dic. 2022 a las 23:51

2 respuestas 2

2

Buen día,

Yo te recomendaría no crear la etiqueta p desde JavaScript, en este caso es un solo elemento y no habría problemas pero cuando hay muchos elementos que se insertan en el DOM (Document Object Model) de forma dinámica se tienen que recalcular posiciones y podría haber problemas.

Podrías crear la etiqueta p desde un inicio, pero ocultándola con display: none para que no fuera visible en el DOM, eso permitiría que todo el html conserve su estructura sin ser modificada dinámicamente.

Luego en tu función podrías mostrar u ocultar el elemento al revisar el estado de display.

Nota: Como display está definido en css no puedes leerlo directamente del elemento, por lo que tienes que utilizar la función getComputedStyle.

Ejemplo:

const div = document.getElementById("div");
    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(){
    el = document.getElementById("show");
    
    if (window.getComputedStyle(el, null).display == 'none') {
        el.style.display = "block";
    }
    else {
        el.style.display = "none";
    }
}
 div {
    background: green;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
}

#show {
  width: 100px;
  height: 10px;
  background: blue;
  margin: 0;
  display: none;
}
<div id="div">
  <p id="show"></p>
</div>

1
  • Gracias por la respuesta, me es de gran ayuda! Pero creo que no ha quedado clara mi intención. El código me sirve, excepto cuando primero cilcko el elemento, muevo el elemento y lo dejo en algún lugar con onmouseup. Entonces después de este se ejecuta el evento click, que combrueba si esta display o no, al haberlo clickado el elemento esta display y lo pone none. Es allí mi problema, no quiero que lo borré después de mover el elemento. Por eso pregunte lo de crear una variable como puedo averiguar si onmousemove se ejecuto.
    – Roberto
    Commented el 23 dic. 2022 a las 10:00
2

Al final encontré una solución ^^ 😊 Muchas gracias a Reny Ramos y HeytalePazguato

const div = document.getElementById("div");
const x = document.getElementById("p");
    div.addEventListener("mousedown", move);
    div.addEventListener("click", cli);
    div.setAttribute("data-moverse", "false");
    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';
                z.setAttribute("data-moverse", "true");
        }
        function mov(event){
                mo(event.pageX, event.pageY);
        }
        z.addEventListener('mousemove', mov);
        z.onmouseup = function(e){
          z.removeEventListener('mousemove', mov);
        }
    }
    function cli(e){
        if(e.target.getAttribute("data-moverse") == "true"){
            x.style.display="block";
            div.setAttribute("data-moverse", "false");
        }else{
            x.style.display= "none";
            div.setAttribute("data-moverse", "true");
        }
    }
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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.