Arrastar/soltar é um recurso muito comum. Você pode pegar um objeto e arrastá -lo para a área que deseja colocar. Muitos JavaScripts implementam funções relacionadas da mesma forma, como o componente Draganddrop de Jqueryui. No HTML5, a queda de arrasto se torna a operação padrão e qualquer elemento suporta. Como essa função é tão comum, todos os navegadores principais suportam esta operação.
Ative a propriedade arrastávelÉ muito simples. Basta modificar o atributo de arrasto de um elemento para draggable, e esse elemento suporta arrastar, como mostrado abaixo:
<imgdraggable = "true"/>
Passando dados enquanto arrastaDurante o processo de arrastando, geralmente precisamos passar dados lógicos correspondentes para concluir o processo de conversão. Aqui, usamos principalmente o objeto Datatransfer para transferência de dados. Vamos dar uma olhada primeiro em seus membros:
Membros do método:
SetData (formato, dados): atribua os dados arrastados ao objeto DataTransfer.
Formato: um parâmetro de string que especifica o tipo de dados que está sendo arrastado. Os valores deste parâmetro podem ser texto (tipo de texto) e URL (tipo URL). Este parâmetro é independente de caso, portanto o texto é o mesmo que o texto.
Dados: um parâmetro de tipo de variante que especifica os dados que estão sendo arrastados. Os dados podem ser texto, caminho da imagem, URL, etc.
Esta função possui um valor de retorno do tipo booleano. Verdadeiro significa que os dados são adicionados com sucesso à datatransfer e false significa que não é bem -sucedido. Se necessário, esse parâmetro pode ser usado para decidir se alguma lógica deve ser continuada.
getData (formato): Obtenha os dados de arrasto armazenados no DataTransfer.
O formato significa o mesmo que no setData, e os valores podem ser texto (tipo de texto) e URL (tipo URL).
ClearData (formato): remove os dados do tipo especificado.
Além do texto (tipo de texto) e URL (tipo de URL) que podem ser especificados acima, o formato aqui também pode receber os seguintes valores: arquivo de arquivo, elemento html-html, imagem de imagem.
Este método pode ser usado para processar seletivamente os tipos de dados arrastados.
Membros de atributo :EFFEFTALLOWED: Define ou obtém a operação de que os dados no elemento de origem de dados podem executar.
O tipo de atributo é uma string e o intervalo de valor é o seguinte:
Dados de cópia de cópia.
dados de link-link.
Dados de mover-mobile
Copylink - Copiar ou vincular dados, determinados pelo objeto de destino.
CopyMove - Copie ou mova dados, determinados pelo objeto de destino.
LinkMove - Link ou Mova os dados, determinados pelo objeto de destino.
As operações todas são suportadas.
Não é proibido nenhum.
Valor padrão não inicializado, adota comportamento padrão.
Observe que, depois de definir o efetivado para nenhum, é proibido arrastar, mas a forma do mouse ainda mostra a forma de um objeto que não pode ser arrastado. Se você não deseja exibir essa forma de mouse, precisará definir o Propriedade ReturnValue do evento do evento da janela como false.
Dropeffect: define ou recebe operações permitidas no alvo arrastado e na forma do mouse associado.
O tipo de atributo é uma string e o intervalo de valor é o seguinte :copie a forma do mouse quando aparece como cópia;
Link-o mouse é mostrado como a forma da conexão;
Move-o mouse aparece como uma forma em movimento.
Nenhum (padrão) - O mouse aparece como uma forma sem arrastar.
O EFFEFTALLOWED Especifica operações suportadas pela fonte de dados, por isso geralmente é especificado no evento ONDRAGSTART. O Dropeffect especifica as ações suportadas arrastando o alvo, para que geralmente seja usado em eventos como OnDragenter, OnDragover e OnDrop no destino arrastado.
Arquivos: Retorna a lista de arquivos arrastados FILIST.
Tipos: Uma lista de tipos de dados enviados no ONDRAGSTART (DAG DATA).
A existência de um objeto Datatransfer possibilita passar dados lógicos entre a fonte de dados arrastada e o elemento de destino. Normalmente, usamos o método setData para fornecer dados no evento ONDRAGSTART do elemento de origem de dados e, em seguida, no elemento de destino, usamos o método getData para obter dados.
Eventos acionados durante a arrastamentoA seguir, é apresentado o evento que ocorrerá ao arrastar e cair. Basicamente, a ordem dos eventos de disparo é a seguinte ordem:
Dragstart: acionado quando o elemento a ser arrastado começa a arrastar. Este objeto de evento é o elemento arrastado.
Arraste: acionado ao arrastar um elemento, esse objeto de evento é o elemento arrastado.
Dragenter: acionado ao arrastar um elemento para o elemento de destino. Este objeto de evento é o elemento de destino.
Dragover: acionado ao arrastar um elemento para se mover no elemento de destino. Este objeto de evento é o elemento de destino.
Dragleave: acionado ao arrastar um elemento para longe do elemento de destino. Este objeto de evento é o elemento de destino.
Drop: acionado quando o elemento arrastado é colocado no elemento de destino. Este objeto de evento é o elemento de destino.
Dragnd: acionado após a queda, que é acionada quando o arrasto é concluído. Este objeto de evento é um elemento arrastado.
Basicamente, o evento de parâmetros do evento passará em elementos relacionados, que podem ser facilmente modificados. Aqui, não precisamos lidar com cada evento, geralmente precisamos conectar apenas alguns eventos principais.
Evento DragstartOs parâmetros passados deste evento contêm muitas informações e você pode obter facilmente os elementos arrastados (event.Target); você pode definir os dados arrastados (event.datatransfer.setData); Assim, você pode implementar facilmente a lógica por trás do arrasto (é claro, também pode passar outros parâmetros ao vincular).
Durante o arrasto - Ondrag, OnDragover, OnDragenter e OnDragleave Events O objeto do evento ONDRAG é um elemento de arrasto, e esse evento geralmente é tratado com menos frequência. O evento ONDRAGENTER ocorre ao arrastar para o elemento atual, o evento ONDRAGLEAVE ocorre ao arrastar para fora do elemento atual e o evento OnDragover ocorre quando o arrasto se move no elemento atual.Apenas uma coisa a observar aqui é que, por padrão, o navegador proíbe a queda de elementos; portanto, para que os elementos canhem, você precisa retornar false nesta função ou chamar o método Event.PreventDefault (). Conforme mostrado no exemplo a seguir.
Drag End - ONDROP, ONDRAGEND EVENTOQuando os dados draggable são descartados, o evento Drop é acionado. Depois que a queda termina, o evento Dragnd é acionado e esse evento é usado relativamente menor.
Vamos dar uma olhada em um exemplo simples:
<! Doctypehtml>
<html>
<head>
<scripttype = "text/javascript">
FunctionAlowDrop (Ev) {
ev.preventDefault ();
}
functionDrag (ev) {
ev.datatransfer.setData ("text", ev.target.id);
}
functionDrop (EV) {
vardata = ev.datatransfer.getData ("text");
ev.target.appendChild (document.getElementById (dados));
ev.preventDefault ();
}
</script>
</head>
<Body>
<divid = "div1" ondrop = "gota (event)" ondragover = "allowDrop (event)"> </div>
<imgid = "drag1" src = "img_logo.gif" draggable = "true" ondragstart = "drag (event)" width = "336" altura = "69"/>
</body>
</html>
Arraste e arraste o arquivoO exemplo acima usou vários métodos e propriedades do DataTransfer. Vamos dar uma olhada em outro aplicativo interessante na Internet: arraste e solte uma imagem na página da web e exibi -la na página da web. Este aplicativo usa a propriedade de arquivos da DataTransfer.
<! Doctypehtml>
<html>
<head>
<Metacharset = "UTF-8">
<Title> HTML5 Arquivo de arrastar e soltar </title>
<estilo>
#Section {Font-Family: "Georgia", "Microsoft Yahei", "Chinese Song";}
.Container {Display: Inline-Block; Min-Hight: 200px; Min-Width: 360px; cor:#f30; preenchimento: 30px; borda: 3pxsolid#ddd; -moz-border-radius: 10px; -webkit-border-radius: 10px; Border-Radius: 10px;
.Preview {max-width: 360px;}
#List de arquivos {Posição: Absolute; top: 0; esquerda: 500px;}
#list {width: 460px;}
#list.preview {max-width: 250px;}
#listp {color:#888; font-size: 12px;}
#list.green {color:#09C;}
</style>
</head>
<Body>
<Divid = "Seção">
<p> Arraste sua imagem para o contêiner abaixo: </p>
<divid = "contêiner" class = "contêiner">
</div>
<divid = "arquivos-list">
<p> arquivos que foram arrastados: </p>
<lid = "list"> </ul>
</div>
</div>
<Cript>
if (window.fileReader) {
varlist = document.getElementById ('list'),
cnt = document.getElementById ('contêiner');
// julga se a foto é
FunctionIsImage (Type) {
switch (tipo) {
case'image/jpeg ':
case'image/png ':
case'image/gif ':
case'image/bmp ':
case'image/jpg ':
returnTrue;
padrão:
returnfalse;
}
}
// lidera a lista de arquivos de arrastar e soltar
FunctionHandleFileSelect (EVT) {
evt.stopPropagation ();
evt.preventDefault ();
varfiles = evt.datatransfer.files;
for (vari = 0, f; f = arquivos [i]; i ++) {
Vart = F.Type? F.Type: 'n/a',
leitor = newFileReader (),
looks = function (f, img) {
list.innerhtml+= '<li> <strong>'+f.name+'</strong> ('+t+
')-'+f.size+'bytes <p>'+img+'</p> </li>';
cnt.innerhtml = img;
},
ISIMG = ISIMAGE (T),
img;
// Processando as imagens obtidas
if (isimg) {
leitor.onload = (function (thefile) {
returnfunção (e) {
img = '<imgclass = "preview" src = "'+e.target.result+'" title = "'+thefile.name+'"/>';
looks (o arquivo, img);
};
}) (f)
leitor.readasdataurl (f);
}outro{
img = '' O ((> ω <) o ", o que você enviou não é uma foto! ! ';
looks (f, img);
}
}
}
// lida com o efeito de inserção e arraste
FunctionHandLedRagenter (EVT) {this.setAttribute ('style', 'estilo de fronteira: tracered;');}
FunctionHandLedRagleave (EVT) {this.setAttribute ('style', '');}
// Lidar com os eventos de arrastamento de arquivos para evitar o redirecionamento causado por eventos padrão do navegador
FunctionHandledRagover (EVT) {
evt.stopPropagation ();
evt.preventDefault ();
}
cnt.AddeventListener ('Dragenter', HandledRagenter, false);
cnt.addeventListener ('dragover', manipulador, falso);
cnt.addeventListener ('gota', handleFileSelect, false);
cnt.AddeventListener ('Dragleave', HandledRagleave, false);
}outro{
document.getElementById ('Seção'). INnerHTML = 'Seu navegador não o suporta, ClassMate';
}
</script>
</body>
</html>
Neste exemplo, a API de leitura de arquivo no HTML5 é usada: o objeto FileReader; Este objeto fornece o seguinte método assíncrono para ler arquivos:
1.FileReader.readasBinaryString (FileBlob)
Leia o arquivo no modo binário, o atributo de resultado conterá o formato binário de um arquivo
2.FileReader.readastext (FileBlob, Opt_Encoding)
Leia o arquivo no modo de texto. O atributo de resultado conterá o formato de texto de um arquivo. O parâmetro de decodificação padrão é UTF-8.
3.FileReader.readasDataurl (arquivo)
A leitura do resultado do resultado no formulário URL conterá o formato DATAURL de um arquivo (as imagens geralmente são dessa maneira).
Quando o arquivo é lido usando o método acima, os seguintes eventos serão acionados:
Onloadstart, OnProgress, Onabort, OnError, Onload, OnLoadend
Esses eventos são muito simples, basta conectar quando necessário. Veja o seguinte exemplo de código:
FunctionStarTread () {
// obtém -ingledElementThroghdom
varfile = document.getElementById ('arquivo'). arquivos [0];
if (arquivo) {
getastext (arquivo);
}
}
functionGetastext (readfile) {
Varreader = newFileReader ();
// readfileIntomoryasutf-16
leitor.readastext (readfile, "utf-16");
// handleprogress, sucesso e errors
reader.onProgress = UpdateProgress;
leitor.onload = carregado;
leitor.onerror = errorHandler;
}
functionUpdateProgress (EVT) {
if (evt.lengthcomputable) {
//evt.loadedAndevt.toTalareProgressEventProperties
var da (evt.loaded/evt.total);
if (carregado <1) {
// aumenta o comprimento do bato
//style.width=(loaded*200)+"px ";
}
}
}
FunctionLoaded (EVT) {
// obtém -sereadfiledata
varfileString = evt.target.result;
// handleutf-16filedump
if (utils.regexp.ischinese (filestring)) {
// chineseCharacters+NameValidation
}
outro{
// runothercharsettetest
}
//xhr.send( filestring)
}
functionErrorHandler (EVT) {
if (evt.target.error.name == "NotReadaBleerr") {
// O arquivo não pode não
}
}
Deixe -me falar brevemente sobre isso aqui: o download de arquivo comum usa o método Window.open, por exemplo:
window.open ('http://aaa.bbbb.com/ccc.rar'.'_blank')
Referência prática: Documento oficial: http://www.w3schools.com/html5/Um bom site de tutorial: http://html5.phphube.com/html5/features/drapanddrop/
MSDN Ajuda: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
Descrição detalhada do arrasto e soltar de arquivos: http://www.html5rocks.com/zh/tutorials/file/dndfiles/
Arraste e carregue o arquivo: http://www.chinaz.com/design/2010/0909/131984.shtml
Exemplo completo de arrastar e soltar de arquivo: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
Exemplo de download do arquivo: http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
Window.open Guia: http://www.vevb.com/liulf/archive/2010/03/01/1675511.html
Parâmetro Window.open: http://www.koyoz.com/blog/?action=show&id=176