Drag or move a dialog element with the mouse

Question

Drag or move a dialog element with the mouse

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I would like to know how I can do to move a dialog with the mouse, only with javascript and css code, without using other libraries like 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>

Greetings

javascript html5 css

asked by Neyer 17.02.2018 в 17:09

source

2 answers

TypeError: Image data can not be converted to float Error creating a table by _token

score 1 · Answer 1

You can do it by associating an event with dialog . In this case I have associated the event click with dialog and, when this event is launched, I call a function that I called muevete .

In that function, and using a Boolean variable, I control if we have clicked to move the dialog or to leave it positioned somewhere. In case we have given you click to move the element I also associate an event mousemove or, otherwise, I eliminate that association to said event.

In the function associated with the event mousemove I get the coordinates in which the mouse is located and I position the dialog in those coordinates.

Your modified example:

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>

score 1 · Answer 2

An option using the events of drag & drop.

As you can see in the example, I added the draggable attribute to the dialog.

In the event dragstart of the dialog I calculate and store the position of the upper corner of the dialog with respect to the mouse, to correctly calculate the final position in the drop event.

In the event dragover of body I annul the default behavior of the event (which does not allow to drag elements on it) to be able to drag the dialog across the page.

In the event drop of body calculate the final position of the dialog based on the position of the mouse and the stored offset.

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>