O exemplo neste artigo compartilha com você o código específico para realizar o efeito de arrastar do mouse em JavaScript para sua referência. O conteúdo específico é o seguinte
.
Acho que a dificuldade deste experimento é manter a posição relativa da caixa e do mouse inalterada. Como conseguir o efeito de arrastar pressionando e movendo o mouse
?
Precisamos usar três funções: onmousedown , onmousemove e onmouseup , que representam respectivamente o pressionamento do mouse, o movimento do mouse e o levantamento do mouse.
Na função de retorno de chamada do pressionamento do mouse , precisamos obter a posição inicial do mouse por meio de clientX e clientY , e através de offsetLeft e offsetTop obtém a posição inicial da caixa e, em seguida, calcula a diferença entre a posição inicial do mouse e a posição inicial da caixa
na função de retorno de chamada do movimento do mouse , precisamos obter a posição atual de; a caixa com base na diferença entre a posição do mouse e a posição calculada anteriormente e, em seguida, altere seus valores esquerdo e superior, não se esqueça de definir a posição como absoluta (porque esqueci...)
Na função de retorno de chamada do mouse lift , precisamos limpar o movimento e o levantamento do mouse, definindo onmousemove e onmouseup como null. Também
preste atenção! ! !
Tanto a função de movimento do mouse quanto a função de elevação do mouse devem ser escritas na função de pressionar o mouse, porque precisamos projetar o comportamento subsequente após a ação de pressionar o mouse, e um ponto muito importante é:
a função de pressionar o mouse é p, e o mouse Mover e levantar o mouse estão no documento
porque não queremos dizer que o mouse se move em p, mas move a página inteira.
Os pontos principais são provavelmente estes:
<!DOCTYPE html>.
<html>
<cabeça>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="largura=largura do dispositivo, escala inicial=1,0">
<título>Documento</título>
<estilo>
#caixa{
largura: 100px;
altura: 100px;
cor de fundo: água-marinha;
raio da borda: 14px;
sombra da caixa: 2px 2px 6px rgba(0,0,0,.3);
/* Os mocinhos querem se mover e mudar para a esquerda sem definir o posicionamento. . . */
posição: absoluta;
}
</estilo>
</head>
<corpo>
<div id="caixa"></div>
<roteiro>
deixe box=document.getElementById("caixa");
box.onmousedown=function(evento){
deixe disx=event.clientX-box.offsetLeft;
deixe disy=event.clientY-box.offsetTop;
//Este não é box.onmousemove, mas document.onmousemove
document.onmousemove=function(evento){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//Para ser escrito em omniusedown document.onmouseup=function(){
//Ambos devem ser definidos como nulos
document.onmousemove=null;
document.onmouseup=nulo;
retornar falso;
}
}
</script>
</body>
</html> Recomendações relacionadas: [Tutorial em vídeo JavaScript]
O conteúdo acima é o conteúdo detalhado de js para simular eventos de arrastar do mouse (com exemplos de imagens e textos. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês). !
