Previous chapter (HTML5 Elements - Audio)Next chapter (HTML5 Elements - Canvas)

HTML5 Drag and Drop between four elements

Drag and Drop magic with HTML5 using an image to drag back and forth between four <div> elements.

Other examples in Drag drop (HTML5 Elements)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
        #div1, #div2, #div3, #div4
        {
            float: left;
            width: 70px;
            height: 70px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script type="text/javascript">
        function canDrop(ev) {
            ev.preventDefault();
        }

function performdrag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

function performdrop(ev) {
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
            ev.preventDefault();
        }
    </script>
</head>
<body>
    <div id="div1" ondrop="performdrop(event)" ondragover="canDrop(event)">
        <img src="/images/html5_64.png" draggable="true" ondragstart="performdrag(event)" id="drag1" width="64" height="64" />
    </div>
    <div id="div2" ondrop="performdrop(event)" ondragover="canDrop(event)">
    </div>
    <div id="div3" ondrop="performdrop(event)" ondragover="canDrop(event)">
    </div>
    <div id="div4" ondrop="performdrop(event)" ondragover="canDrop(event)">
    </div>
</body>
</html>

^1.0

^1.0

^1.0

^4.0

^6.0

HTML5 Drag and Drop between four elements

Useful Information