HTML 5 Feature: Drag And Drop

Introduction

Earlier, we have used various third party libraries for implementing Drag and Drop functionality. So the problem of code management became difficult as code was not standard. But now with the introduction of HTML 5, a standard Drag and Drop API is introduced which helps us to achieve our functionality easily. Today, I would like to demo the Drag and Drop functionality with a small funny puzzle-like page. I will be creating a face puzzle wherein attaching the parts of the face like nose, eyes, and lips, create a face. To implement Drag and Drop functionality, steps to be followed.

1. Set the source element (an element that you want to drag), draggable attribute to true.
2. Handle onDrop event for the droppable container element.
3. Handle onDragOver event because HTML container elements won’t allow anything to be dragged inside it.
4. Execute & test it.

Let’s begin with our face puzzle implementation.

Step 1. Create a HTML page.

Create an HTML page with name DragDrop.html and copy the below CSS (Cascading Style Sheet) & HTML code.

HTML & Css Code

<html>
<head>
    <style>
        body {
            cursor: pointer;
            text-align: center;
        }
        .divdrag {
            position: relative;
            border: 0px solid rgba(0, 0, 0, .25);
            width: 300px;
            height: 300px;
            padding: 10px;
            float: left;
        }
        .face {
            background-image: url('face.jpg');
            background-repeat: no-repeat;
            width: 424px;
            height: 510px;
            border: 1px dotted grey;
            padding: 0;
        }
        .facetr td {
            text-align: center;
            border: 1px dotted #f7ecec;
        }
    </style>
</head>
<body>
    <h2>Create the face</h2>
    <div class="divdrag">
        <img src="eye1.png" alt="eye" draggable="true" id="eye1" ondragstart="drag(event)" />
        <img src="eye2.png" alt="eye" draggable="true" id="eye2" ondragstart="drag(event)" />
        <img src="nose2.png" alt="nose" draggable="true" id="nose2" ondragstart="drag(event)" />
        <img src="eye4.png" alt="eye" draggable="true" id="eye4" ondragstart="drag(event)" />
        <img src="nose1.png" alt="nose" draggable="true" id="nose1" ondragstart="drag(event)" />
        <img src="eye3.png" alt="eye" draggable="true" id="eye3" ondragstart="drag(event)" />
        <img src="smile1.png" alt="smile" draggable="true" id="smile1" ondragstart="drag(event)" />
        <img src="smile3.png" alt="smile" draggable="true" id="smile2" ondragstart="drag(event)" />
        <img src="smile2.png" alt="smile" draggable="true" id="smile3" ondragstart="drag(event)" />
    </div>
    <div style="float:left;">
        <a href="DragDrop.html" title="Click here to reset" style="text-decoration:none;">
            <img src="direction.png" width="125" height="100" onclick="" />
        </a>
    </div>
    <div id="div1" style="width:300px;height:300px;float:left;">
        <table class="face">
            <tr>
                <td colspan="2" style="width:100%;"> </td>
            </tr>
            <tr>
                <td colspan="2" style="width:100%;"> </td>
            </tr>
            <tr>
                <td id="eye" style="width:50%" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
                <td id="eye" style="width:50%" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
            </tr>
            <tr>
                <td id="nose" ondrop="drop(event)" ondragover="allowDrop(event)" colspan="2"></td>
            </tr>
            <tr>
                <td id="smile" ondrop="drop(event)" ondragover="allowDrop(event)" colspan="2"></td>
            </tr>
        </table>
    </div>
</body>
</html>