English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Primeira parte: quatro eventos touch
1.touchstart: Quando o dedo é colocado na tela (independentemente de quantos), é acionado o evento touchstart.
2.touchmove: Quando deslizamos o dedo na tela, este evento é acionado continuamente. Se não desejarmos que a página se mova, podemos usar event.preventDefault para impedir este comportamento padrão.
3.touchend: Quando o dedo sai da tela após o deslize, é acionado o evento touchend.
4.touchcancel: O sistema aciona este evento quando para de rastrear o toque. Por exemplo, se um alert() for acionado durante o toque, este evento será acionado, e este evento é usado raramente.
Segunda parte: quatro objetos touch
1. touches, é um objeto de array-like, que contém todas as informações dos dedos, se houver apenas um dedo, então usamos touches[0] para representá-lo.
2. targetTouches: As informações do dedo no área de destino.
3. changedTouches: As informações do dedo que acionaram o evento recentemente.
4. touchend: Quando o sistema para de rastrear o toque, as informações de touches e targetTouches são excluídas, e as informações armazenadas em changedTouches são as últimas, que são melhores usadas para calcular as informações do dedo.
Terceira parte: exemplo1
Primeiro, veja o efeito gráfico:
A implementação é muito simples, é só definir a propriedade de posição do círculo vermelho como absolute, e então, quando nos movemos nele, aciona o evento touchmove, definindo Left e top como pageX e pageY do evento, para garantir que o ponto de ativação esteja no mesmo local que o centro do círculo, basta adicionar metade da largura a pageX e metade da altura a pageY.
Código-fonte a seguir:
<!DOCTYPE html>
<html>
<cabeçalho>
<title>touchExample</título>
<meta name="viewport" content="largura=device-largura, usuário-escalável=não, inicial-escala=1.0, mínimo-escala=1.0, máximo-escala=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<estilo>
#touchDiv{
posição: absoluto;
largura: 50px;
altura: 50px;
topo: 20px;
esquerda: 20px;
texto-alinhamento: centro;
linha-altura: 50px;
cor: branco;
borda-raio: 50%;
fundo-cor: vermelho;
}
</style>
</head>
<body>
<div id="touchDiv">Clique em mim</div>
<script>
var touchDiv = document.getElementById("touchDiv");
var x,y;
touchDiv.addEventListener("touchstart",podeArrastar);
touchDiv.addEventListener("touchmove",arrastar);
touchDiv.addEventListener("touchend",nodrag);
function podeArrastar (e) {
console.log("god começou");
}
function arrastar (e) {
$("#touchDiv").css("left",e.touches[0].pageX-25);
$("#touchDiv").css("top",e.touches[0].pageY-25);
}
function nodrag () {
console.log("god terminou");
}
</script>
</body>
</html>
Parte Quarta: Exemplo2
Este exemplo é a implementação da função Arrastar para Atualizar, efeito conforme abaixo:
Código-fonte a seguir:
<!DOCTYPE html>
<html>
<cabeçalho>
<título>Arrastar para Atualizar</título>
<meta name="viewport" content="largura=device-largura, usuário-escalável=não, inicial-escala=1.0, mínimo-escala=1.0, máximo-escala=1.0">
<estilo>
*{
margem:0;
preenchimento: 0;
fonte-tamanho:15px;
}
.cabeçalho{
altura: 50px;
linha-altura: 50px;
texto-alinhamento: centro;
fundo-cor: azul;
cor: branco;
fonte-tamanho: 23px;
}
.arrastar_para_atualizar{
alinhamento-itens: centro;
preenchimento-esquerda: 155px;
fundo-cor: #bbb;
cor: amarelo;
exibição: none;
}
.atualizar{
altura: 50px;
linha-altura: 50px;
texto-alinhamento: centro;
fundo-cor: #bbb;
cor: verde;
exibição: none;
}
.arrastar{
texto-alinhamento: centro;
fundo-cor: cinza claro;
posição: relativa;
preenchimento:20px;
texto-espaçamento: 1em;
linha-altura: 30px;
fonte-tamanho:18px;
}
</style>
</head>
<body>
<div class="header">Nuvem governamental</div>
<div class="drag_to_refresh"></div>
<div class="refresh">Aguarde, atualizando...</div>
<div class="drag">Governo eletrônico nuvem (E-nuvem governamental) pertence ao governo, combinando as características da tecnologia de nuvem computacional, simplificando, otimizando e integrando as funções de gestão e serviço do governo, e realizando através de meios informatizados a realização de vários processos de negócios e serviços funcionais em serviços governamentais, fornecendo uma plataforma de serviços IT confiável para todos os departamentos governamentais.</div>
<script>
window.onload = function () {
var initX;
var drag_content = document.querySelector(".drag");
var drag_to_refresh = document.querySelector(".drag_to_refresh");
var refresh = document.querySelector(".refresh");
drag_content.addEventListener("touchmove",drag);
drag_content.addEventListener("touchstart",dragStart);
drag_content.addEventListener("touchend",dragEnd);
function dragStart(e){
initY = e.touches[0].pageY;
console.log(initX);
}
function drag (e){
drag_to_refresh.style.display = "block";
drag_to_refresh.style.height = (e.touches[0].pageY - initY) + "px";
console.log(drag_to_refresh.style.height);
if(parseInt(drag_to_refresh.style.height)>=100){
// Atenção: pois o valor de height obtido é em unidades px, usamos parseInt para analisar
drag_to_refresh.style.height = "100px";
if(parseInt(drag_to_refresh.style.height)>80){
drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
drag_to_refresh.innerHTML = "Solte para atualizar";
}
}
}
function dragEnd (e){
if(parseInt(drag_to_refresh.style.height)>80){
refresh.style.display = "block";
setTimeout(reload,1000);
}
drag_to_refresh.style.display = "none";
}
function reload () {
location.reload();
}
}
</script>
</body>
</html>
O que foi mencionado acima é o que o editor apresentou aos amigos sobre a implementação da função de atualização de arrasto no dispositivo móvel, esperando ajudar a todos. Se você tiver alguma dúvida, por favor, deixe um comentário, o editor responderá a todos a tempo. Agradecemos também o apoio dos amigos ao site de tutorial de clamor!
Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, é contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal relevante. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, troque # por @ para denunciar e forneça provas relevantes. Caso seja confirmada a infração, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)