Arrastar dados para dentro de um elemento HTML

Adobe AIR 1.0 e posterior

O comportamento padrão apenas permite que texto seja arrastado em regiões editáveis da página. Você pode especificar que um elemento e seus filhos podem se tornar editáveis incluindo o atributo contenteditable na tag de abertura do elemento. Você também pode tornar um documento inteiro editável definindo a propriedade designMode de objeto de documento como "on" .

Você pode suportar um comportamento alternativo de arrastar para dentro em uma página manipulando os eventos dragenter , dragover e drop para qualquer elemento que pode aceitar dados arrastados.

Ativação de arrastar para dentro

Para manipular o gesto de arrastar para dentro, você deve primeiro cancelar o comportamento padrão. Ouça os eventos dragenter e dragover em qualquer elemento HTML que deseja usar como destinos de soltar. Nos manipuladores desses eventos, chame o método preventDefault() do objeto de evento despachado. Cancelar o comportamento padrão permite que regiões não editáveis recebam uma ação de soltar.

Obtenção de dados soltos

Você pode acessar os dados soltos no manipulador para o evento ondrop : 

function doDrop(event){ 
    droppedText = event.dataTransfer.getData("text/plain"); 
}

Use o método dataTransfer.getData() para ler dados na área de transferência, transmitindo o tipo MIME do formato de dados a ler. Você pode descobrir que formatos de dados estão disponíveis usando a propriedade types do objeto dataTransfer . A matriz types contém a sequência de caracteres de tipo MIME de cada formato disponível.

Quando você cancela o comportamento padrão nos eventos dragenter ou dragover, você é responsável por inserir qualquer dado solto em seu próprio lugar no documento. Nenhuma API existe para converter uma posição do mouse em um ponto de inserção dentro de um elemento. Essa limitação pode dificultar a implementação de gestos de arrastar de tipo de inserção.