<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trabalhando com Eventos #02</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body class="conteudo exercicio">
<div>Elemento</div>
<script>
const item = document.querySelector('div')//seleciona 1 div
item.style.position = 'absolute'
item.onmousemove = e =>{
const item = e.target
item.style.cursor = 'move'
if(e.buttons){//se o botão foi cliclado
//e = evento, e.target = dispara o evento na posição do topo
//e.target.style.top = `${e.clientY - (item.clientHeight / 2)}px`//pega o eixo y -
//e.target.style.top = `${e.clientX - (item.clientWidth / 2)}px`
item.style.top = `${e.clientY - (item.clientHeight / 2)}px`//posição x do mouse - (altura / 2)
e.target.style.left = `${e.clientX - (item.clientWidth / 2)}px`//posição x do mouse - (largura / 2)
}
}
</script>
</body>
</html>
 |
Nenhum comentário:
Postar um comentário