Arrastar e soltar é uma parte do padrão HTML5.
Arrastar a imagem acima para o rectângulo.
em HTML
O trabalho projecto de especificação HTML5 inclui suporte para drag & drop. HTML5 suporta diferentes tipos de arrastar e soltar recursos, incluindo:
- Arrastar e soltar textos e códigos HTML
- Arrastar e soltar elementos HTML
- Arrastar e soltar arquivos
Com base na acção necessária, um dos tipos anteriores pode ser usado. Note-se que quando um elemento HTML é arrastado para mover a sua posição actual, o seu ID é enviado para o destino elemento pai; por isso envia um texto e pode ser considerado como o primeiro grupo.
aplicativo de e-mail baseado na web do Google Gmail suporta drag-and-drop de imagens e anexos no navegador Google Chrome o mais recente e Safari da Apple (5.x). E pesquisa de imagens do Google suporta drag & drop.
Drag and Drop
Arrastar e soltar é uma característica muito comum. É quando você "grab" um objeto e arrastá-lo para um local diferente.
Em HTML5, arrastar e soltar é parte do padrão, e qualquer elemento pode ser arrastado.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente Drag and Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9 | 3,5 | 6 | 12,0 |
Arraste HTML e Exemplo Gota
O exemplo a seguir é um exemplo simples de arrastar e largar:
Exemplo
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> Tente você mesmo " Pode parecer complicado, mas vamos passar por todas as diferentes partes de um evento de arrastar e soltar.
Faça um elemento Draggable
Primeiro de tudo: Para tornar um elemento arrastável, defina o draggable atributo a true :
<img draggable="true">
O que Arraste - ondragstart e setData()
Em seguida, especifique o que deve acontecer quando o elemento é arrastado.
No exemplo acima, o ondragstart atributo chama uma função, drag(event) , que especifica quais dados a ser arrastado.
O dataTransfer. setData() dataTransfer. setData() método define o tipo de dados e o valor dos dados arrastado:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
Neste caso, o tipo de dados é "text" e o valor é o id do elemento arrastável ("drag1") .
Onde Drop - ondragover
O ondragover evento especifica onde os dados arrastados podem ser largados.
Por padrão, os dados / elementos não pode ser descartado em outros elementos. Para permitir uma queda, devemos evitar a manipulação padrão do elemento.
Isso é feito chamando o event. preventDefault() event. preventDefault() método para a ondragover evento:
event . preventDefault()
Faça o Drop - ondrop
Quando os dados arrastado é solto, um evento de queda ocorre.
No exemplo acima, o ondrop atributo chama uma função, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Código explicou:
- Chamar preventDefault() para impedir a manipulação padrão do navegador dos dados (default is open as link on drop)
- Obter os dados arrastados com o dataTransfer. getData() dataTransfer. getData() método. Este método irá devolver quaisquer dados que foram estabelecidos para o mesmo tipo no setData() Método
- Os dados arrastado é o id do elemento arrastado ("drag1")
- Acrescentar o elemento arrastado para a drop elemento
Imagem de arrasto e para trás
Como arrastar (and drop) uma imagem e para trás entre dois <div> elementos.