Drag and Drop Panel

Angular editor

HTML

<table>
    <tr>
        <td>
            <button id="test1" ondragstart="drag(event)" draggable="true">Function-1</button><hr>
            <button id="test2" ondragstart="drag(event)" draggable="true">Function-2</button><hr>
            <button id="test3" ondragstart="drag(event)" draggable="true">Variable-1</button><hr>
            <button id="test4" ondragstart="drag(event)" draggable="true">Variable-2</button><hr>
        </td>
        <td>
            <div>
                <pre ondrop="drop(event, this)" ondragover="allowDrop(event)" id="div1" contentEditable="true"></pre>
            </div>
        </td>
    </tr>
</table>
<textarea id="hello" name="aaa" id="" cols="30" rows="10">hello my name is inigo...</textarea>
<br>
<button>Clear</button>

CSS

#div1 {
    width: 350px;
    height: 250px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
#box1 {
    height: 50px;
    width: 50px;
    background: red;
}
#box2 {
    height: 50px;
    width: 50px;
    background: blue;
}
#box3 {
    height: 50px;
    width: 50px;
    background: green;
}
#box4 {
    height: 50px;
    width: 50px;
    background: yellow;
}
table, tr, td {
    border: 1px solid black;
    border-collapse:collapse;
    padding:5px;
}

JavaScript

$("button").click(function () {
    $("#div1").empty();
});

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.id);
}

function drop(ev, target) {
    debugger;
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");
    var $target = target ? $(target) : $(ev.target);
    var elementTypes = {
        test1: "test1{ \n\n\n<span class='functionClose'>}</span>",
        test2: "test2{ \n\n\n<span class='functionClose'>}</span>",
        test3: "var first;",
        test4: "var second;"
    }   
     
    if(data){
        var el = $("<code>"+elementTypes[data]+"<br></code>");
        if(el.find("span").length > 0){
            el.on("dragover",function(ev){
                console.log("dragged over");
                ev.preventDefault();  
                ev.stopPropagation();
                allowDrop(ev);
            }).on("drop", function(ev){
                console.log("dropped over");
                ev.preventDefault();  
                ev.stopPropagation();
                drop(ev.originalEvent,el.find("span")[el.find("span").length -1]);
            });
        }
		if($target.hasClass("functionClose")){
			$target.before(el);
		}
		else{
			$target.append(el);
		}                            
    }
    
}
$(function() {
    console.log($( "#hello" ).val());
        $( "#div1" ).sortable();
   // $( "#div1" ).disableSelection();
  });