When to use the draggable attribute in the html element (tag)?

Question

When to use the draggable attribute in the html element (tag)?

Asked 8 years, 6 months ago

Viewed 381 times

2

I’ve learned that the global draggable attribute makes HTML elements draggable and with a little Javascript gets even more interesting. But according to the HTML documentation, this attribute can be used in the html element (tag). Question: does anyone know a real or even imaginary case of using the draggable attribute specifically in the html root tag? When to use? If it is in the documentation, it is because someone at some point understood that its use in some situation is at least necessary. Thank you!

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

1 answer

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2016-03-20T02:41:13+00:00

This attribute allows creating a ghost of the element that will drag and with Javascript it can be moved to other elements, as in this example:

Drag the orange div pro first div with gray outline below and then drag again pro second 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>

Basically it makes only the ghost, but events like ondragstart support the DataTransfer which is basically used to store element data when dragged.

Using the attribute in the HTML tag

The use of draggable=true it is not always to move an element, we can usually copy or read, say you will want to read the current html content when dropping in the drop area (it is a half useless example, it is more to understand how it works), this way it will emit a 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>

However we can also work with iframes, in this case move an entire HTML into another area, note that it is necessary to run on a valid server like http://localhost, the protocol file:/// blocks this type of action, create two files, iframe.html and test.html in your server folder

html test.:

<!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>

After this run the.html test like this for example http://localhost/pasta/teste.html and press the mouse (mouse) inside the iframe and drag, you will notice that it will generate a ghost of all html and then release it into the div#drop-area, it will move the whole content of html leaving the iframe blank, note that who makes the event work at the end is the:

area1.ondrop = function (e) {
    e = e||window.event;
    e.preventDefault();

    e.target.appendChild(iframeHTML);
};

Supported browsers:

Despite being considered HTML5, this attribute was already supported by some older browsers, however it was not standardized, it follows list of browsers with support:

Chrome 4.0
IE 6 (partial support) link and image support added to IE9
IE10, IE11 and Microsoft Edge do not support .setDragImage
Firefox 3.5
Safari 6.0
Opera 12.1

(Only Desktop browsers, mobile browsers do not support this attribute)