Este atributo permite criar um fantasma do elemento que irá arrastar e com Javascript ele poderá ser movido pra outros elementos, como neste exemplo:
Arraste o div laranja pro primeiro div com contorno cinza abaixo e depois arraste novamente pro segundo div
function allowDrop(e) {
e = e||window.event;
e.preventDefault();
}
function drag(e) {
e = e||window.event;
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e = e||window.event;
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
var area1 = document.getElementById("drop-area-1");
var area2 = document.getElementById("drop-area-2");
var draggable = document.getElementById("draggable-item");
draggable.ondragstart = drag;
area1.ondrop = drop;
area1.ondragover = allowDrop;
area2.ondrop = drop;
area2.ondragover = allowDrop;
#draggable-item
{
background-color: #fc0;
width: 100px;
height: 100px;
}
#drop-area-1, #drop-area-2
{
display: inline-block;
border: 1px #c0c0c0 solid;
width: 200px;
height: 200px;
margin: 5px;
}
<div id="draggable-item" draggable="true"></div>
<div id="drop-area-1"></div>
<div id="drop-area-2"></div>
Basicamente ele faz apenas o fantasma, mas os eventos como ondragstart
suportam o DataTransfer
que é basicamente usado pra guardar dados dos elementos quando arrastados.
Usando o atributo na tag HTML
O uso de draggable=true
nem sempre é pra mover um elemento, geralmente podemos copiar ou ler, digamos que você venha a querer ler o conteúdo do html atual ao soltar na na área de drop (é um exemplo meio inutil, é mais pra entender o funcionamento), desta maneira ele irá emitir um alert
:
<!DOCTYPE html>
<html draggable="true">
<head>
<title>teste</title>
<style type="text/css">
#drop-area
{
display: inline-block;
border: 1px #c0c0c0 solid;
width: 200px;
height: 200px;
margin: 5px;
}
</style>
</head>
<body>
<div id="drop-area"></div>
<script type="text/javascript">
function allowDrop(e) {
e = e||window.event;
e.preventDefault();
}
window.onload = function() {
var html = document.querySelector("html");
var area1 = document.getElementById("drop-area");
area1.ondragover = allowDrop;
area1.ondrop = function (e) {
e = e||window.event;
e.preventDefault();
alert(html.outerHTML);
};
};
</script>
</body>
</html>
No entanto podemos também trabalhar com iframes, neste caso mover um HTML inteiro pra dentro de uma outra área, note que é necessário rodar em um servidor valido como http://localhost
, o protocolo file:///
bloqueia este tipo de ação, crie dois arquivos, o iframe.html e o teste.html na pasta do seu servidor
teste.html:
<!DOCTYPE html>
<html>
<head>
<title>teste</title>
<style type="text/css">
#drop-area
{
display: inline-block;
border: 1px #c0c0c0 solid;
width: 200px;
height: 200px;
margin: 5px;
}
iframe {
width: 100%;
background: #fff;
border: 1px #ccc solid;
}
</style>
</head>
<body>
<iframe id="meuIframe" src="iframe.html"></iframe>
<div id="drop-area"></div>
<script type="text/javascript">
function allowDrop(e) {
e = e||window.event;
e.preventDefault();
}
window.onload = function() {
var mf = document.getElementById("meuIframe");
var cw = (mf.contentWindow || mf.contentDocument);
if (!cw.document) {
return;
}
var iframeDocument = cw.document;
var iframeHTML = iframeDocument.querySelector("html");
var area1 = document.getElementById("drop-area");
area1.ondragover = allowDrop;
area1.ondrop = function (e) {
e = e||window.event;
e.preventDefault();
e.target.appendChild(iframeHTML);
};
};
</script>
</body>
</html>
iframe.html:
<!DOCTYPE html>
<html draggable="true">
<head>
<style type="text/css">
html {
width: 100%;
height: 100%;
background-color: #fc0;
}
</style>
</head>
<body>
oi
</body>
</html>
Após isto execute o teste.html assim por exemplo http://localhost/pasta/teste.html
e pressione o mouse (rato) dentro do iframe e arraste, vai notar que vai gerar um fantasma do html todo e depois solte no div#drop-area
, ele vai mover o conteudo todo do html deixando o iframe em branco, note que quem faz o evento funcionar no final é o:
area1.ondrop = function (e) {
e = e||window.event;
e.preventDefault();
e.target.appendChild(iframeHTML);
};
Navegadores com suporte:
Apesar de ser considerado HTML5, este atributo já era suportado por alguns navegadores mais antigos, no entanto não era padronizado, segue lista de navegadores com suporte:
- Chrome 4.0
- IE 6 (suporte parcial) o suporte pra links e imagens foi adicionado no IE9
- IE10, IE11 e Microsoft Edge não suportam
.setDragImage
- Firefox 3.5
- Safari 6.0
- Opera 12.1
(Apenas navegadores Desktop, navegadores mobile não suportam este atributo)