When to use the draggable attribute in the html element?

Question

When to use the draggable attribute in the html element?

Navigation

#1 by (1 votes)

2

I've already learned that the draggable global attribute makes HTML elements draggable and with a bit of JavaScript even more interesting. But according to the HTML documentation, this attribute can be used in the html element. 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>

html5

asked by anonymous 19.03.2016 / 23:24

1 answer

Git init did not create master branch Segmented Regression in R

score 1 · Accepted Answer

This attribute allows to create 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 to the first div with gray outline below and then drag it back to the 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 does only the ghost, but events like ondragstart support DataTransfer which is basically used to store element data when dragged.

Using the attribute in the HTML tag

The use of draggable=true is not always to move an element, usually we can copy or read, say that you want to read the contents of the current html when dropping in the drop area (it is a somewhat useless example, more to understand the operation), in 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 server that is valid as http://localhost , the file:/// protocol blocks this type of action, create two files, iframe.html and test.html in your server's folder

test.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>

After this run the test.html so 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 the whole html and then drop in div#drop-area , it will move the whole content of the html leaving the iframe blank, note that whoever makes the event work at the end is:

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, following list of browsers supported:

Chrome 4.0
IE 6 (partial support) support for links and images was added in IE9
IE10, IE11 and Microsoft Edge do not support .setDragImage
Firefox 3.5
Safari 6.0
Opera 12.1

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