Guia HTML5 - 3. Como implementar a função HTML Element Drag and Drop

Autor：Eve Cole Data da Última Atualização：2025-04-12 09:48:02

O conteúdo deste artigo é sobre como implementar a função de arrasto do elemento HTML em html5/"> html5. Para implementar o arrasto e soltar antes do HTML5, você precisa usar o JS. Agora o HTML5 suporta arrastar e soltar a função internamente, mas para implementar um pouco mais de funções complexas, o JS é indispensável.

1. Crie um objeto de arrasto

Podemos dizer ao navegador através do atributo draggable quais elementos precisam para implementar a função Drag and Drop. Draggable tem três valores: true: o elemento pode ser arrastado; Falso: o elemento não pode ser arrastado; Auto: o navegador determina se o elemento pode ser arrastado por si só.

O valor padrão do sistema é automático, mas o navegador suporta diferentes funções de arrastar e soltar de diferentes elementos no caso do automóvel, como: ele suporta objetos IMG, mas não suporta objetos div. Portanto, se você precisar arrastar um elemento, é melhor definir o draggale como true. Vejamos um exemplo abaixo:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

#src> *

{

flutuar: esquerda;

}

#target, #src> img

{

Fronteira: preto sólido fino;

preenchimento: 2px;

margem: 4px;

}

#alvo

{

Altura: 123px;

Largura: 220px;

Alinhamento de texto: centro;

exibição: tabela;

}

#target> p

{

Exibição: Tabela de células;

Alinhamento vertical: meio;

}

#target> img

{

margem: 1px;

}

</style>

</head>

<Body>

Solte aqui </p>

</div>

<Cript>

var src = document.getElementById ("src");

var no destino = document.getElementById ("Target");

</script>

</body>

</html>

Efeito de corrida:

2. Lidar com eventos de arrastar e soltar

Agora, vamos entender os eventos relacionados ao arrasto. Existem dois tipos de eventos, um é o evento do objeto de arrasto e o outro é o evento da área de gota. Os eventos de arrasto incluem: Dragstart: acionado quando o elemento arrastar inicia; arrasto: acionado durante o arrasto do elemento; Drague: acionado quando o elemento arrastar termina. Vamos dar um exemplo abaixo:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

#src> *

{

flutuar: esquerda;

}

#target, #src> img

{

Fronteira: preto sólido fino;

preenchimento: 2px;

margem: 4px;

}

#alvo

{

Altura: 123px;

Largura: 220px;

Alinhamento de texto: centro;

exibição: tabela;

}

#target> p

{

Exibição: Tabela de células;

Alinhamento vertical: meio;

}

#target> img

{

margem: 1px;

}

img.dragged

{

cor de fundo: laranja;

}

</style>

</head>

<Body>

Solte aqui </p>

</div>

<Cript>

var src = document.getElementById ("src");

var no destino = document.getElementById ("Target");

var msg = document.getElementById ("msg");

src.ondragstart = function (e) {

e.target.classList.add ("arrastado");

}

src.ondragend = function (e) {

e.target.classList.remove ("arrastado");

msg.innerhtml = "soltar aqui";

}

src.ondrag = function (e) {

msg.innerhtml = e.target.id;

}

</script>

</body>

</html>

Efeito de corrida:

3. Crie uma área de entrega

Vejamos os eventos relacionados à área de entrega: Dragenter: acionado quando o objeto de arrasto entra na área de entrega; Dragover: acionado quando o objeto de arrasto se move na área de entrega; Dragleave: o objeto de arrasto não é entregue na área de entrega e acionado quando sai da área de entrega; Drop: acionado quando o objeto de arrasto é colocado na área de entrega.

Vamos dar uma olhada em um exemplo:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

#src> *

{

flutuar: esquerda;

}

#target, #src> img

{

Fronteira: preto sólido fino;

preenchimento: 2px;

margem: 4px;

}

#alvo

{

Altura: 123px;

Largura: 220px;

Alinhamento de texto: centro;

exibição: tabela;

}

#target> p

{

Exibição: Tabela de células;

Alinhamento vertical: meio;

}

#target> img

{

margem: 1px;

}

img.dragged

{

Background-Color: Lightgrey;

}

</style>

</head>

<Body>

Solte aqui </p>

</div>

<Cript>

var src = document.getElementById ("src");

var no destino = document.getElementById ("Target");

var msg = document.getElementById ("msg");

var draggedID;

Target.ondRaGenter = HandledRag;

Target.ondRagover = HandledRag;

função manipulada (e) {

E.PreventDefault ();

}

Target.ondrop = function (e) {

var newElem = document.getElementById (draggedId) .cloneNode (false);

Target.innerhtml = "";

Target.AppendChild (Newelem);

E.PreventDefault ();

}

src.ondragstart = function (e) {

draggedId = e.target.id;

e.target.classList.add ("arrastado");

}

src.ondragend = function (e) {

var elems = document.QuerySelectorAll (". Dragtado");

for (var i = 0; i <elems.length; i ++) {

elems [i] .classList.remove ("arrastado");

}

</script>

</body>

</html>

Resultados em execução:

4. Use Datatransfer

Usamos o DataTransfer para passar dados de objetos de arrasto para a área de entrega. Datatransfer possui as seguintes propriedades e métodos: Tipos: retornar o formato dos dados; getData (<Format>): retorna os dados de formato especificados; setData (<Format>, <Data>): define os dados do formato especificado; ClearData (<Format>): remove os dados do formato especificado; Arquivos: Retorna a matriz de arquivos que foi entregue.

Vejamos o exemplo a seguir, o efeito que alcançou é o mesmo do Exemplo 3:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

#src> *

{

flutuar: esquerda;

}

#src> img

{

Fronteira: preto sólido fino;

preenchimento: 2px;

margem: 4px;

}

#alvo

{

Fronteira: preto sólido fino;

margem: 4px;

}

#alvo

{

Altura: 123px;

Largura: 220px;

Alinhamento de texto: centro;

exibição: tabela;

}

#target> p

{

Exibição: Tabela de células;

Alinhamento vertical: meio;

}

img.dragged

{

cor de fundo: laranja;

}

</style>

</head>

<Body>

Solte aqui </p>

</div>

<Cript>

var src = document.getElementById ("src");

var no destino = document.getElementById ("Target");

Target.ondRaGenter = HandledRag;

Target.ondRagover = HandledRag;

função manipulada (e) {

E.PreventDefault ();

}

Target.ondrop = function (e) {

var toLpedID = e.datatransfer.getData ("text");

var newElem = document.getElementById (DroppedID) .CloneNode (false);

Target.innerhtml = "";

Target.AppendChild (Newelem);

E.PreventDefault ();

}

src.ondragstart = function (e) {

e.datatransfer.setData ("text", e.target.id);

e.target.classList.add ("arrastado");

}

src.ondragend = function (e) {

var elems = document.QuerySelectorAll (". Dragtado");

for (var i = 0; i <elems.length; i ++) {

elems [i] .classList.remove ("arrastado");

}

</script>

</body>

</html>

5. Arraste e solte o arquivo

O HTML5 suporta API de arquivo, que nos permite manipular arquivos locais. Geralmente, não usamos a API de arquivo diretamente. Podemos usá -lo em combinação com outros recursos, como combinar efeitos de arrastar e soltar, como mostrado no exemplo a seguir:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

corpo> *

{

flutuar: esquerda;

}

#alvo

{

Fronteira: preto duplo médio;

margem: 4px;

Altura: 75px;

Largura: 200px;

Alinhamento de texto: centro;

exibição: tabela;

}

#target> p

{

Exibição: Tabela de células;

Alinhamento vertical: meio;

}

mesa

{

margem: 4px;

colapso da fronteira: colapso;

}

th, td

{

preenchimento: 4px;

}

</style>

</head>

<Body>

Solte os arquivos aqui </p>

</div>

</tabela>

<Cript>

var no destino = document.getElementById ("Target");

Target.ondRaGenter = HandledRag;

Target.ondRagover = HandledRag;

função manipulada (e) {

E.PreventDefault ();

}

Target.ondrop = function (e) {

Arquivos var = e.datatransfer.files;

var tabelalem = document.getElementById ("dados");

tabelelem.innerhtml = "<tr> <th> nome </th> <th> tipo </th> <h> size </th> </tr>";

for (var i = 0; i <files.length; i ++) {

var row = "<tr> <td>" + arquivos [i] .name + "</td> <td>" + arquivos [i] .type + "</td> <td>" + arquivos [i] .size + "</td> </tr>";

tabelalem.innerhtml += linha;

}

E.PreventDefault ();

}

</script>

</body>

</html>

DataTransfer Retorna um objeto Filelist, que podemos tratar como um objeto de matriz de arquivos, e o arquivo contém as seguintes propriedades: Nome: Nome do arquivo; Tipo: Tipo de arquivo (tipo MIME); Tamanho: Tamanho do arquivo.

Efeito de corrida:

6. Carregar arquivos

A seguir, é apresentado um exemplo de carregamento de arquivos arrastando e soltando o Ajax.

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

.mesa

{

exibição: tabela;

}

.linha

{

Exibição: tabela-fila;

}

.célula

{

Exibição: Tabela de células;

preenchimento: 5px;

}

.rótulo

{

Alinhamento de texto: à direita;

}

#alvo

{

Fronteira: preto duplo médio;

margem: 4px;

Altura: 50px;

Largura: 200px;

Alinhamento de texto: centro;

exibição: tabela;

}

#target> p

{

Exibição: Tabela de células;

Alinhamento vertical: meio;

}

</style>

</head>

<Body>

<div>

Bananas: </div>

<div>

</div>

<div>

Maçãs: </div>

<div>

</div>

<div>

Cerejas: </div>

<div>

</div>

<div>

Arquivo: </div>

<div>

</div>

<div>

TOTAL: </div>

itens </div>

</div>

Solte os arquivos aqui </p>

</div>

<botão id = "submeter" type = "submeter">

Enviar formulário </botão>

</morm>

var no destino = document.getElementById ("Target");

var httprequest;

var fileList;

Target.ondRaGenter = HandledRag;

Target.ondRagover = HandledRag;

função manipulada (e) {

E.PreventDefault ();

}

Target.ondrop = function (e) {

fileList = e.datatransfer.files;

E.PreventDefault ();

}

Document.getElementById ("submeter"). OnClick = Função HODEDBOTTONpress (e) {

E.PreventDefault ();

var form = document.getElementById ("fruitform");

var formData = new FormData (form);

if (filelist) {

for (var i = 0; i <fileList.length; i ++) {

formData.Append ("FILE" + I, FILELIST [I]);

}

httprequest = novo xmlHttPrequest ();

httprequest.onReadyStatechange = HandleResponse;

httprequest.open ("post", form.action);

httprequest.send (formData);

}

Função HandleResponse () {

if (httprequest.readyState == 4 && httprequest.status == 200) {

var dados = json.parse (httprequest.ResponseText);

Document.getElementById ("Resultados"). Innerhtml = "Você pediu" + data.total + "itens";

}

</script>

</body>

</html>

Efeito:

Alguns dos exemplos acima podem ter diferentes efeitos de execução de navegadores. Estou usando um navegador Chrome. Exceto pelos Exemplos 5 e 6 que não suportam vários arquivos, outros exemplos são executados normalmente. Você pode baixar a demonstração.

Endereço para download de demonstração: html5guide.draggable.rar