W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML draggable attribute example</title>
    <style>
        .box {
            height: 100px;
            width: 120px;
            margin: 15px;
            border: 1px solid #aaaaaa;
            float: left;

/* Align horizontally and vertically */
            text-align: center;
            align-content: center;

/* Align horizontally and vertically */
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
        }
        .box span {
            background: rgb(100, 100, 100, 0.3);
            border: 2px solid black;
            padding: 10px;
        }
        i {
            border: 2px solid red;
            padding: 42px 25px;
        }
    </style>
</head>
<body>
    <h3>HTML draggable attribute example</h3>
    <p>The draggable attribute specifies whether an element can be dragged</p>
    <div class="box" ondrop="dropHandler(event)" ondragover="allowdragover(event)">
        <span id="dragitemid" draggable="true" ondragstart="dragstart(event)">
            Drag me!
        </span>
    </div>
    <div class="box" ondrop="dropHandler(event)" ondragover="allowdragover(event)">
        <i id="drop-msg-id">Drop here</i>
    </div>
    <script>
        //Create a div element
        let div = document.createElement('div');
        function dragstart(ev) {
            //transfer object id
            ev.dataTransfer.setData("dragitemid", ev.target.id);
            //get dragging item parent node;
            div = ev.target.parentNode;
        }
        function allowdragover(ev) {
            // allow drop
            ev.preventDefault();
        }
        function dropHandler(ev) {
            //Get the drop message element 
            const child = document.getElementById("drop-msg-id");
            //Get the Drop-over-node div reference, put to parentNode
            const parentNode = ev.target.parentNode;
            //add the drop-msg-item to the dragging-item-parant node
            div.appendChild(child);
            // Get the dragged element id
            const data = ev.dataTransfer.getData("dragitemid");
            // Append the dragged element to the drop target
            parentNode.append(document.getElementById(data));
        }
    </script>
</body>
</html>