JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
    
    <head>
        <style type="text/css">
            #div1,#div2 {
                width:350px;
                height:70px;
                padding:10px;
                border:1px solid #aaaaaa;
            }
        </style>
        <script>
            function allowDrop(ev) {
                ev.preventDefault();
            }

            function drag(ev) {
                var id = ev.target ? ev.target.id : ev.srcElement.id;
                if (id === "circle") {
                    id = ev.target.parentNode.parentNode.id;
                }
                ev.dataTransfer.setData("Text", id);
            }

            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    
    <body>
       
        <div id="div1" ondrop="drop(event)"
        ondragover="allowDrop(event)"></div>
             <div id="div2" ondrop="drop(event)"
        ondragover="allowDrop(event)"></div>
        <br>
        <div id="wrapper" draggable="yes" ondragstart="drag(event)" style="width:100px; height:100px;">
            <svg id="svg" width="100" height="100" draggable="yes" ondragstart="drag(event)" >
                <circle id="circle" cx="50" cy="50" r="30" fill="yellow"></circle>
            </svg>
        </div>
    </body>

</html>