A API HTML5 de arrastar e soltar (DnD) significa que quase qualquer elemento de uma página pode se tornar arrastável. Neste artigo, vamos abordar o básico do arrastar e soltar.
Crie conteúdo arrastável
Vale notar que, na maioria dos navegadores, seleções de texto, imagens e links são arrastáveis por padrão. Por exemplo, se você arrastar o logo do Google na busca do Google, verá uma imagem fantasma. A imagem pode então ser arrastada e colocada na barra de endereços, no elemento <input type="file" />, ou até mesmo na área de trabalho. Para tornar outros tipos de conteúdo arrastáveis, você precisa usar a API HTML5 de DnD.
Para tornar um objeto arrastável, defina o elementoarrastável=verdadeiro。 Arrastar pode ser suportado para quase qualquer elemento, incluindo imagens, arquivos, links, arquivos ou qualquer marcação em uma página.
No nosso exemplo, vamos criar uma interface para reorganizar algumas colunas, que foram organizadas via CSS Grid. A marcação básica para essas colunas é mostrada abaixo, com a propriedade arrastável definida como verdadeira para cada coluna.
Aqui está o CSS para meus elementos de contêiner e caixa. Note que o único CSS relacionado à funcionalidade de DnD é a propriedade cursor: mover. O restante do código controla apenas o layout e o estilo dos elementos do container e da caixa.
Nesse ponto, você verá que pode arrastar o item, mas nada mais acontece. Para adicionar funcionalidade de DnD, precisamos usar a API JavaScript.
Fique atento a eventos drag
Muitos eventos diferentes podem ser anexados para monitorar todo o processo de arrastar e soltar.
- Arranque
- arrastar
- Dragenter
- Dragleave
- Dragover
- deixar cair
- Dragend
Para processar um stream de DnD, você precisa de algum tipo de elemento de origem (o ponto de partida do arrasto), a carga útil de dados (o que você está tentando posicionar) e o alvo (a área onde o encaixe está colocado). Elementos de origem podem ser imagens, listas, links, objetos de arquivo, blocos HTML, etc. O objetivo é aceitar a zona de drop (ou conjunto de zonas de drop) dos dados que o usuário está tentando colocar. Lembre-se de que nem todos os elementos podem ser objetivos, por exemplo, imagens não podem ser objetivos.
Iniciar e terminar a sequência de arrastar e soltar
Após definir a propriedade arrastável="verdadeiro" no conteúdo, anexe um manipulador de eventos arrastar para iniciar a sequência de DnD de cada coluna.
Esse código define a opacidade da coluna para 40% quando o usuário começa a arrastar, e depois reverte para 100% ao final do evento de arrasto.
Os resultados podem ser vistos na demonstração Glitch abaixo. Arraste um item e ele ficará opaco. Como o evento arrastar start tem como alvo o elemento de origem, definir this.style.opacity em 40% dá ao usuário um feedback visual de que o elemento atualmente selecionado está se movendo. Após o item ser colocado, o elemento fonte retorna a 100% de opacidade, embora a função de posicionamento ainda não tenha sido escrita.
Use dragenter, dragover e dragleave para adicionar pistas visuais adicionais
Para ajudar os usuários a entenderem como interagir com sua interface, use os gerenciadores de eventos dragenter, dragover e dragleave. No exemplo a seguir, as colunas podem ser arrastadas ou direcionadas. Para ajudar os usuários a entender isso, quando o usuário arrasta um item além de uma coluna, a borda dessa coluna se torna uma linha pontilhada. Por exemplo, você pode criar uma overclass no CSS para representar um elemento que é um alvo de posicionamento:
Depois, configure um gerenciador de eventos em JavaScript para adicionar a overclass ao arrastar uma coluna e removê-la ao sair. No condutor de arrasto, também queremos garantir que a classe seja removida no final do arrasto.
Há alguns pontos a mencionar neste código:
Ao arrastar um elemento como um link, você precisa bloquear o comportamento padrão do navegador, que é navegar até esse link. Para isso, chame e.preventDefault() no evento de dragover. Outra boa prática é retornar false no mesmo handler.
Use o handler de eventos do dragenter para trocar de classe, não o dragover. Se você usar dragover, a classe CSS é ativada várias vezes porque o evento dragover continua disparando quando a coluna paira. Eventualmente, isso fará com que o renderizador do navegador faça muito trabalho desnecessário. É melhor sempre manter o redesenho ao mínimo. Se precisar usar eventos de dragover por algum motivo, considere limitar ou remover os ouvintes dos eventos.
Finalize a colocação
Para lidar com a colocação real, adicione um ouvinte de evento para o evento de descida. Em um gerenciador de drop, você precisa bloquear o comportamento padrão de posicionamento do navegador, que geralmente é algum tipo de redirecionamento irritante. e.stopPropagation() pode ser chamado para evitar que o evento dispare o DOM.
Certifique-se de registrar o novo manipulador no outro handler:
Se você rodar o código neste momento, o projeto não será colocado em um novo local. Para isso, você precisa usar um objeto DataTransfer.
A propriedade dataTransfer é onde todas as maravilhas do DnD acontecem. Ele salva os fragmentos de dados enviados na operação de arrasto. dataTransfer é definido no evento arrastar start e é lido/processado no evento drop. Chame e.dataTransfer.setData (mimeType, dataPayload) para definir o tipo MIME e a carga útil de dados do objeto.
No exemplo a seguir, vamos permitir que os usuários reorganizem a ordem das colunas. Para isso, primeiro você precisa armazenar o HTML do elemento de origem no início do arrasto:
Gerencie a posição das colunas no evento drop, defina o HTML da coluna de origem para o HTML da coluna de destino onde ela está colocada, primeiro verifique se a coluna de destino arrastada e solta pelo usuário é a mesma da coluna de origem.
Mais propriedades de arrasto
O objeto dataTransfer expõe propriedades que são usadas para fornecer feedback visual ao usuário durante o processo de arrastar. Essas propriedades também podem ser usadas para controlar como cada alvo de colocação responde a tipos de dados específicos.
- dataTransfer.effectAllowed limita o "tipo de arrasto" que um usuário pode realizar em um elemento. Ele é usado no modelo de tratamento de arrastar e soltar para inicializar o dropEffect durante eventos de dragenter e arrasto. Essa propriedade pode ser definida para os seguintes valores: nenhum, copy, copyLink, copyMove, link, linkMove, move, all e uninitialized.
- dataTransfer.dropEffect controla o feedback fornecido ao usuário durante os eventos de dragenter e arrasto. Quando o usuário paira sobre o elemento alvo, o cursor do navegador indicará o tipo de ação a ser realizada (por exemplo, copiar, mover, etc.). O efeito pode ser um dos seguintes valores: nenhum, copiar, linkar, mover.
- e.dataTransfer.setDragImage(imgElement, x, y) indica que o feedback padrão de "imagem fantasma" do navegador não é usado, e há uma opção para definir o ícone de arrastar.
Enviar arquivos arrastando e soltando
O exemplo simples a seguir usa uma coluna como fonte de arrasto e alvo de arrasto. Isso pode ser visto na interface quando o usuário é solicitado a reorganizar os itens. Em alguns casos, arrastar o alvo e arrastar a fonte podem ser diferentes, como em uma interface onde o usuário precisa selecionar uma imagem como a imagem principal do produto arrastando a imagem selecionada para o alvo.
O sistema de arrastar e soltar é frequentemente usado para permitir que os usuários arrastem itens da área de trabalho para o aplicativo. A principal diferença é o responsável pela queda. Sem usar dataTransfer.getData() para acessar o arquivo, os dados do arquivo serão incluídos na propriedade dataTransfer.files:
Link original:O login do hiperlink está visível.
|
Postado em 26-04-2022 às 10:30:50
|
|
|
|
Postado em 26-04-2022 21:27:25
|
