2

Já aprendi que o atributo global draggable torna os elementos da HTML arrastáveis e com um pouco de JavaScript fica ainda mais interessante. Mas, segundo a documentação do HTML, esse atributo pode ser usado no elemento (tag) html. Pergunta: alguém sabe um caso real ou até imaginário de uso do atributo draggable especificamente na tag raiz html? Quando usar? Se está na documentação, é porque alguém, em algum momento, entendeu que seu uso em alguma situação é, no mínimo, necessário. Obrigada!

<html draggable="true">
   ...
</html>

1 Resposta 1

1

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)

4
  • Consegue mostrar um outro exemplo do uso (real ou imaginário) do atributo aplicado ao elemento (tag) html? A W3 permite que esse atributo seja utilizado na tag html, mas nunca entendi o porque... nunca vi em código algum isso. Mas se está lá, é porque em algum momento alguém entendeu que seu uso é necessário... consegue dizer qual? Obrigada! Commented 20/03/2016 às 13:17
  • 1
    @IngridFarabulini entendi a sua duvida, vou ler mais e te retorno, vou fazer um teste com <iframes>, pode ser isso. Não tenho certeza
    – Syzoth
    Commented 20/03/2016 às 17:09
  • 1
    Também já imagina algo com o uso de iframes. Obrigada! Commented 20/03/2016 às 17:19
  • 1
    @IngridFarabulini editei a resposta
    – Syzoth
    Commented 20/03/2016 às 17:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .