como arrastar e largar elementos e ficheiros HTML usando Javascript

para definir um efeito de gota, devem seguir-se os seguintes passos:

5.1. Determine o(s) Efeito (s) de gota permitido (s) no elemento Draggable no seu manipulador de eventos dragstart

Usando a propriedade com efeito na propriedade de Evento dataTransfer, você define todos os efeitos de gota que são permitidos ser aplicados para esse elemento draggable.

isto é feito como diferentes locais de gota podem ser definidos e diferentes efeitos de gota podem ser manuseados por local de gota.,

a tabela A seguir define os possíveis effectAllowed valores de propriedade com base no MDN docs:

5.2. Para cada Gota de Localização, Definir o Efeito de Soltar(s) para que no Evento dragover Processador

A ser definido queda efeito deve ser um dos permitido efeitos determinados no evento dragstart manipulador do local de origem.,

Quando um efeito de gota não é um dos efeitos de gota permitidos, ele será ajustado para um dos efeitos de gota permitidos.

dragover manipulador, onde o efeito de soltar devem ser definidas, é executado quando o elemento arrastado está sendo arrastado sobre uma possível queda de localização.

o seguinte é um exemplo de definição dos efeitos de gota para uma determinada localização de gota.

6) Definir uma Zona de Queda (Drop Localização)

Por padrão, nenhum elemento no documento HTML permite uma gota., No entanto, isso pode ser alterado e, a fim de fazer um elemento uma zona drop, ele deve ter:

• o manipulador de eventos ondragover, que é executado quando o elemento draggable está sendo arrastado sobre este elemento. Neste manipulador de eventos, o efeito de gota da localização de gota é definido como mencionado anteriormente no passo 5.2.
• o manipulador de eventos ondrop, que é o executado quando o elemento draggable é largado no local/zona de arrasto.

o seguinte é um exemplo de definição de um elemento como uma localização de gota.,

Em ambos os dragover e a queda de manipuladores de eventos, preventDefault() deve ser chamado para permitir uma queda, uma vez que indica que uma queda é permitido no local.

Se uma gota só for permitida em certas situações em que as condições são usadas, então só adicione preventefault se as condições para permitir uma gota forem cumpridas. Isto é feito para evitar que o elemento seja uma zona de queda se as condições não forem cumpridas onde a queda não deve ser permitida.,

rejeitar uma gota baseada no tipo de dados de arrasto na propriedade dataTransfer é um caso comum. O exemplo a seguir demonstra que, ao permitir que apenas as ligações sejam descartadas no elemento de drop zone que tem o manipulador de dragover.

7) Identificador do Elemento Drop

Durante o evento drop, a arrastar os dados devem ser processados. Para isso, é utilizado o método getData() na propriedade do evento dataTransfer.,

o método getData() recupera os itens de arrasto como é preciso um único argumento do tipo de dados para recuperar e ele irá retornar o valor de cadeia associado a ele.

as propriedades allowedEffect e dropEffect ajudam a controlar o feedback que será apresentado ao usuário.

manusear esse feedback é da responsabilidade do desenvolvedor e deve ser implementado no manipulador de eventos drop. Por exemplo, recuperar um elemento e adicioná-lo a outro pai irá movê-lo, mas copiar o nó irá resultar em um efeito de cópia.,

se forem definidos vários efeitos de queda para uma única zona de queda, a propriedade dropEffect deve ser usada para determinar qual a operação de arrasto que foi desejada para este evento de largada em particular.o seguinte é um exemplo de manipulação de uma gota.

às Vezes, você pode ter suporte a diferentes tipos de dados, mas só quer recuperar o mais específico do tipo. O seguinte código do MDN docs demonstra isso.,

8) Use o dragend Evento para Verificar se a Queda foi bem-Sucedida

No final de uma operação de arrastar, um evento dragend fogos no elemento de origem. O evento dispara se o arrasto foi bem sucedido ou foi cancelado.

para verificar se a operação de arrasto foi bem sucedida ou não, o valor do dropEffect pode ser verificado do seguinte modo:

• Se o valor da propriedade dropEffect for “nenhum” no tratador de eventos de dragend, então significa que as operações de arrasto foram canceladas.,caso contrário, o valor da propriedade dropEffect é a operação que foi realizada com sucesso.como é que isto é útil?

  o elemento fonte pode usar esta informação após uma operação bem sucedida de mover para remover o item arrastado do local antigo.

  Demonstração no HTML do Elemento de Arraste & Drop

  Nota: você também pode clonar o projeto do meu Github aqui.,

  

  1) Detect the Drag & Drop Feature Support in Your Browser

  Before using the HTML drag & drop API, add feature detection code to ensure browser support.

  The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

  2) Definir uma Zona de Queda (Drop Localização)

  Por padrão, nenhum elemento no documento HTML permite uma gota. No entanto, isso pode ser alterado e, a fim de fazer um elemento uma zona drop, ele deve ter:

  • a manipuladora de eventos ondragover, que é executada quando o(S) arquivo (s) é/estão sendo arrastados sobre a localização drop.
  • o manipulador de eventos ondrop, que é o executado quando o(s) ficheiro (s) é/são largados no local de largada.,

  conforme indicado pelos docs MDN:

  dragstart e dragend eventos não são disparados ao arrastar um ficheiro para o navegador a partir do so.

  o seguinte é um exemplo para definir um elemento como uma localização de queda.

  3) Identificador do Arquivo Drop

  Quando o usuário solta o arquivo(s) em uma zona de queda, uma queda evento será acionado. Durante o evento drop, O(S) arquivo (s) deve (M) ser processado (s) como desejado.,

  para acessar cada arquivo descartado, use a propriedade DataTransfer do evento para acessar a propriedade arquivos. Depois de acessar um arquivo descartado, use a API de arquivo para processá-lo.

  Se o navegador suportar a propriedade DataTransferItemList, você pode usá-la com o método getAsFile() em vez de usar a propriedade DataTransfer para acessar o arquivo.

  tanto no dragover como no drop event handlers, preventDefault() deve ser chamado para permitir uma drop, pois indica que uma drop é permitida nesse local., Ele também impede que o arquivo seja aberto, que é o comportamento padrão que ocorre ao largar um arquivo em uma página web.

  Se uma gota só for permitida em certas situações em que as condições são usadas, então só adicione preventefault se as condições para permitir uma gota forem cumpridas. Isto é feito para evitar que o elemento seja uma zona de queda se as condições não forem cumpridas onde a queda não deve ser permitida.

  o seguinte exemplo, a partir de docs MDN, demonstra o processamento de arquivos descartados, onde um item de arrasto que não é um arquivo é ignorado., Both possible ways are demonstrated in this

  Demo on HTML Element’s Drag & Drop

  Note: you can also clone the project from my Github here.

---