Jquery Drag and Drop at different locations

Question

I have few draggable buttons and one droppable textarea. When I drag one of the draggable button onto the textarea, it will shows some code. If I drag one more button, the text related to that button will appends to previous one.

My question is how can I drop my next button text/snippet between those two code snippets?

This is my code

Script:

$("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) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");

var function1 = "test1{ \n\n\n}";
var function2 = "test2{ \n\n\n}";
var variable1 = "var first;";    
var variable2 = "var second;";

    console.log("****",target);

    if (data == "test1") {
        if (data) {
            $('#div1').append(function1);
        }
    }
    if (data == "test2") {
        if (data) {
            $('#div1').append(function2);
        }
    }
     if (data == "test3") {
        if (data) {
            $('#div1').append(variable1);
        }
    }
     if (data == "test4") {
        if (data) {
            $('#div1').append(variable2);
        }
    }
}

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>
            <textarea id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></textarea>
        </td>
    </tr>
</table>
<br>
<button>Clear</button>

Fiddle: http://jsfiddle.net/ktL02h7u/16/

Answer 1

I added jQuery UI to your fiddle, also changed texarea to <pre> tag and all the lines you add I wrapped them in <code> so they will be elements you can drag.

after page loads I use $("#div1").sortable(); this makes the children sortable. you can obviously add transition to the elements if you want them to smoothly go to their place.

check it out: http://jsfiddle.net/ktL02h7u/32/

function drop(ev, target) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");

var function1 = "test1{ \n\n\n}";
var function2 = "test2{ \n\n\n}";
var variable1 = "var first;";    
var variable2 = "var second;";


    if (data == "test1") {
        if (data) {
            $('#div1').append("<code>"+function1+"<br></code>");
        }
    }
    if (data == "test2") {
        if (data) {
            $('#div1').append("<code>"+function2+"<br></code>");
        }
    }
     if (data == "test3") {
        if (data) {
            $('#div1').append("<code>"+variable1+"<br></code>");
        }
    }
     if (data == "test4") {
        if (data) {
            $('#div1').append("<code>"+variable2+"<br></code>");
        }
    }
}
$(function() {
        $( "#div1" ).sortable();
  });

EDIT: Major code change after I understood you wanted to drop inside of elements: http://jsfiddle.net/ktL02h7u/66/

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);
        }                            
    }

}