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

HTML5 Drag and Drop

Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari.

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">
        #boxA, #boxB
        {
            float: left;
            padding: 10px;
            margin: 10px;
            -moz-user-select: none;
        }
        #boxA
        {
            background-color: Blue;
            width: 75px;
            height: 75px;
        }
        #boxB
        {
            background-color: Green;
            width: 150px;
            height: 150px;
        }
    </style>
    <script type="text/javascript">
        function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target, 0, 0);
            return true;
        }
        function dragEnter() {
            event.preventDefault();
            return true;
        }
        function dragOver() {
            return false;
        }
        function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
        }
    </script>
</head>
<body>
    <div>
        Try to move the blue box into the green box!
    </div>
    <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
        <p>
            Drag Me
        </p>
    </div>
    <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
        Drag into me and release.
    </div>
</body>
</html>

^1.0

^1.0

^1.0

^4.0

^6.0

HTML5 Drag and Drop

Useful Information