Usando a API HTML5 Drag and Drop

A API HTML5 Drag and Drop (DnD) significa que podemos tornar quase qualquer elemento em nossa página arrastável. Nesta postagem, explicaremos os fundamentos do Drag e soltar.

Criando conteúdo arrastável #

É importante 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 O logotipo do Google na Pesquisa Google, você verá a imagem fantasma. A imagem pode então ser solta na barra de endereço, um elemento <input type="file" /> ou até mesmo na área de trabalho.Para tornar outros tipos de conteúdo arrastáveis você precisa usar as APIs DnD HTML5.

Para tornar um objeto arrastável, defina draggable=true nesse elemento. Praticamente qualquer coisa pode ser ativada para arrastar, imagens, arquivos , links, arquivos ou qualquer marcação em sua página.

Em nosso exemplo, estamos criando uma interface para reorganizar algumas colunas, que foram dispostas com CSS Grid. A marcação básica para minhas colunas se parece com isso, com cada coluna tendo o

atributo definido comotrue.

Aqui está o CSS para meu recipiente e elementos de caixa. Observe que o único CSS relacionada à funcionalidade DnD está a propriedade cursor: move. O resto do código apenas controla o layout e o estilo do contêiner e dos elementos da caixa.

Neste ponto, você irá descubra que você pode arrastar os itens, mas nada mais acontecerá. Para adicionar a funcionalidade DnD, precisamos usar a API JavaScript.

Ouvindo eventos de arrastamento #

Existem vários de eventos diferentes para anexar para monitorar todo o processo de arrastar e soltar.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Para lidar com o fluxo DnD, você precisa de algum tipo de elemento de origem (de onde se origina o arrasto), os dados pa yload (o que você está tentando derrubar) e um alvo (uma área para pegar a queda). O elemento de origem pode ser uma imagem, lista, link, objeto de arquivo, bloco de HTML, etc. O destino é a zona de soltar (ou conjunto de zonas para soltar) que aceita os dados que o usuário está tentando eliminar. Lembre-se de que nem todos os elementos podem ser alvos, por exemplo, uma imagem não pode ser um alvo.

Começando e terminando uma sequência de arrastar e soltar #

Depois de ter draggable="true" atributos definidos em seu conteúdo, anexe um dragstart manipulador de eventos para iniciar a sequência DnD para cada coluna.

Este código definirá a opacidade da coluna para 40% quando o usuário começar a arrastá-la e, em seguida, retornará para 100% quando o evento de arrastar terminar.

O resultado pode ser visto na demonstração do Glitch abaixo. Arraste um item e ele se tornará opaco. Como o destino do dragstart evento “é o elemento de origem, definir this.style.opacity para 40% dá ao usuário feedback visual de que o elemento é a seleção atual que está sendo movida. Depois de soltar o item, embora a funcionalidade de soltar não esteja em vigor, o elemento de origem retorna para 100% de opacidade.

Adicionar dicas visuais adicionais com dragenter, dragover e dragleave #

Para ajudar o usuário a entender como interagir com sua interface, use o dragenter, dragover e dragleave manipuladores de eventos. Neste exemplo, as colunas são destinos de soltar além de serem arrastáveis. Ajude o usuário para entender isso fazendo a borda tracejada conforme eles seguram um item arrastado sobre uma coluna. Por exemplo, em seu CSS, você pode criar uma classe over para representar elementos que são alvos de soltar:

Então, em seu J avaScript configura os manipuladores de eventos, adicione a classe over quando a coluna é arrastada e remova-a quando sairmos. No dragend manipulador também nos certificamos de remover as classes no final da operação.

Há alguns pontos que valem a pena cobrir neste código :

• No caso de arrastar algo como um link, você precisa evitar o comportamento padrão do navegador, que é navegar até esse link. Para fazer isso, chame e.preventDefault() no evento dragover. Outra boa prática é retornar false no mesmo manipulador.
• O manipulador de eventos dragenter é usado para alternar a over classe em vez de dragover .Se você usar dragover, a classe CSS será alternada várias vezes enquanto o evento dragover continua a disparar em uma coluna hover. isso causaria o renderizador do navegador para fazer uma grande quantidade de trabalho desnecessário. Manter o redesenho mínimo é sempre uma boa ideia.Se você precisar usar o evento dragover para algo, considere restringir ou eliminar o ouvinte de evento.

Concluindo a eliminação #

Para processar a eliminação real, adicione um ouvinte de evento para o evento drop. No manipulador drop, você “precisará evitar o comportamento padrão do navegador para quedas, que normalmente é algum tipo de redirecionamento irritante. Você pode evitar que o evento borbulhe no DOM chamando e.stopPropagation().

Se você executar o código neste ponto, o item não cairá para o novo local. Para conseguir isso, você precisa usar o DataTransfer objeto.

A propriedade dataTransfer é onde toda a mágica DnD acontece. Ela contém os dados enviados em uma ação de arrastar. dataTransfer é definido no evento dragstart e lido / tratado no evento de descarte. Chamar e.dataTransfer.setData(mimeType, dataPayload) permite que você defina o objeto “s Tipo MIME e carga útil de dados.

Neste exemplo, vamos permitir que os usuários reorganizem a ordem das colunas. Para fazer isso, primeiro você precisa armazenar o HTML do elemento de origem ao arrastar começa:

No evento drop que você processa a queda da coluna, definindo o HTML da coluna de origem como o HTML da coluna de destino que você soltou, primeiro verificando se o usuário não está voltando para a mesma coluna da qual foi arrastado.

Você pode ver o resultado no seguinte demo.Drag e solte a coluna A no topo da coluna B e observe como eles mudam de lugar:

Mais arrastando propriedades #

O objeto dataTransfer expõe propriedades para fornecer feedback visual ao usuário durante o processo de arrastar. Essas propriedades também podem ser usadas para controlar como cada destino de soltar responde a um determinado tipo de dados.

• dataTransfer.effectAllowed restringir Este é o “tipo de arrastamento” que o usuário pode executar no elemento. É usado no modelo de processamento de arrastar e soltar para inicializar o dropEffect durante o dragenter e dragover eventos. A propriedade pode ser definida com os seguintes valores: none, copy, copyLink, copyMove, link, linkMove, move, all e uninitialized.
• dataTransfer.dropEffect controla o feedback que o usuário recebe durante o dragenter e dragover eventos. Quando o usuário passa o mouse sobre um elemento de destino, o cursor do navegador indica que tipo de operação vai ocorrer (por exemplo uma cópia, uma mudança, etc.). O efeito pode assumir um dos seguintes valores: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) significa que em vez de usar o navegador ” s feedback padrão de “imagem fantasma”, você pode, opcionalmente, definir um ícone de arrastar.

Upload de arquivo com arrastar e soltar #

Este exemplo simples usa uma coluna como o arraste a origem e arraste o destino. Isso pode ser visto em uma IU em que o usuário é solicitado a reorganizar os itens. Em algumas situações, o destino e a origem do arrasto podem ser diferentes, como uma interface em que o usuário precisa selecionar uma imagem para ser o imagem principal de um produto arrastando a imagem selecionada para um alvo.

Arrastar e soltar é frequentemente usado para permitir que os usuários arrastem itens de sua área de trabalho para um aplicativo. A principal diferença está em seu drop manipulador.em vez de usar dataTransfer.getData() para acessar os arquivos, seus dados com estará contido na propriedade dataTransfer.files:

Você pode encontrar mais informações sobre isso em arrastar e soltar personalizado.