JSFiddle - React, Tailwind, and code Playground

by ballowii

CSS

#leftTree,#rightTree {
            float: left;
            width: 100px;
            min-height: 100px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
        }
        .content{
            display:inline-block;
            border: 1px solid lightgrey;
        }

JavaScript

function creatLeftRightTree(parentElement){
            var leftTree = document.createElement("DIV");
            var rightTree = document.createElement("DIV");
			
			leftTree.id="leftTree";
            rightTree.id="rightTree";
            leftTree.className="dndcontainer";
            rightTree.className="dndcontainer";

            
            leftTree.onDrop="drop(event)";
            rightTree.onDrop="drop(event)";
			
            rightTree.ondragover="allowDrop(event)";
			
			parentElement.appendChild(leftTree);
            parentElement.appendChild(rightTree);
			rightTree.innerHTML+= rightTree.onDrop;
			
            //it must not be possible to drop in the left Tree

        }
        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var dropTarget = ev.target;
                    dropTarget.appendChild(document.getElementById(data));
            }
        }
        
 function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.preventDefault();
        }
creatLeftRightTree(document.getElementsByTagName("body")[0]);