2

Quisiera saber como puedo hacer para mover un dialog con el raton, solo con codigo javascript y css, sin usar otras librerias como Jquery Bootstrap, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prueba</title>
</head>
<body>
    <script>
        window.addEventListener('load', init, false);

        function init(){
            var botonAbrir = document.querySelector('input[value="abrir"]');
            var botonCerrar = document.querySelector('input[value="cerrar"]');
            var dialogo = document.querySelector('dialog[data-name="dialogo1"]');

            botonAbrir.addEventListener('click', function (e) {
                dialogo.showModal();
            },false);
            botonCerrar.addEventListener('click', function (e) {
                dialogo.close();
            }, false)
        }

    </script>

    <style>
        dialog{
            overflow: auto;
            resize: both;
        }
    </style>

    <input type="button" value="abrir">
    <dialog data-name="dialogo1">
        <p>
            Quiero arrastrar este dialog con el mouse, es decir cambiarlo de posision o ubicacion
        </p>
        <input type="button" value="cerrar">
    </dialog>
</body>
</html>

Saludos

0

2 respuestas 2

2

Una opción utilizando los eventos de drag & drop.

Como puedes ver en el ejemplo le he añadido el atributo draggable al diálogo.

En el evento dragstart del diálogo calculo y almaceno la posición de la esquina superior del diálogo respecto a la del ratón, para calcular correctamente la posición final en el evento drop.

En el evento dragover del body anulo el comportamiento por defecto del evento (que no permite arrastrar elementos sobre él) para poder arrastrar el diálogo por toda la página.

En el evento drop del body calculo la posición final del diálogo a partir de la posición del ratón y del offset almacenado.

window.addEventListener('load', init, false);

function init(){
    var botonAbrir = document.querySelector('input[value="abrir"]');
    var botonCerrar = document.querySelector('input[value="cerrar"]');
    var dialogo = document.querySelector('dialog[data-name="dialogo1"]');

    botonAbrir.addEventListener('click', function (e) {
        dialogo.showModal();
    },false);
    botonCerrar.addEventListener('click', function (e) {
        dialogo.close();
    }, false);
    
    dialogo.addEventListener('dragstart', function(e){
      var style = getComputedStyle(e.target, null);
      e.dataTransfer.setData('text/plain',
        (parseInt(style.getPropertyValue('left'),10) - e.clientX)
        + ',' + 
        (parseInt(style.getPropertyValue('top'),10) - e.clientY));
    }, false);
    
    document.body.addEventListener('dragover', function(e){
      e.preventDefault();
      return false;
    }, false);
    
    document.body.addEventListener('drop', function(e){
      var offset =
        e.dataTransfer.getData("text/plain").split(',');
      dialogo.style.left = 
        (e.clientX + parseInt(offset[0],10)) + 'px';
      dialogo.style.top = (e.clientY + parseInt(offset[1],10)) + 'px';
      e.preventDefault();
    }, false);
}
dialog{
    overflow: auto;
    resize: both;
}
<input type="button" value="abrir">
<dialog data-name="dialogo1" draggable="true">
    <p>
        Quiero arrastrar este dialog con el mouse, es decir cambiarlo de posision o ubicacion
    </p>
    <input type="button" value="cerrar">
</dialog>

1

Lo puedes realizar asociando un evento al dialog. En este caso yo he asociado el evento click al dialog y, cuando este evento es lanzado, llamo a una función que he llamado muevete.

En esa función, y mediante una variable booleana, controlo si le hemos dado click para mover el dialog o para dejarlo posicionado en algún lugar. En caso de que le hayamos dado click para mover el elemento le asocio también un evento mousemove o, en caso contrario, elimino esa asociación a dicho evento.

En la función asociada al evento mousemove obtengo las coordenadas en las que se encuentra el ratón y posiciono el dialog en esas coordenadas.

Tu ejemplo modificado:

window.addEventListener('load', init, false);
var seMueve = false;
 
function init(){
    var botonAbrir = document.querySelector('input[value="abrir"]');
    var botonCerrar = document.querySelector('input[value="cerrar"]');
    var dialogo = document.querySelector('dialog[data-name="dialogo1"]');

    botonAbrir.addEventListener('click', function (e) {
        dialogo.showModal();
    },false);
    botonCerrar.addEventListener('click', function (e) {
        dialogo.close();
    }, false);
    
    dialog.addEventListener('click', muevete, false);
}

function muevete(){
  if(!seMueve){
    dialog.addEventListener('mousemove', modificarCoordenadasDialog, false);
    seMueve = true;
  }else{
    dialog.removeEventListener('mousemove', modificarCoordenadasDialog, false);
    seMueve = false;
  }
}

function modificarCoordenadasDialog(e){
  dialog.style.top = e.clientY + 'px';
  dialog.style.left = e.clientX + 'px';
};
dialog{
  overflow: auto;
  resize: both;
}
<input type="button" value="abrir">
<dialog id="dialog" data-name="dialogo1">
    <p>
        Quiero arrastrar este dialog con el mouse, es decir cambiarlo de posision o ubicacion
    </p>
    <input type="button" value="cerrar">
</dialog>

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.