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