Drag/Drop Functionality with div tags purely using javascript

Question

I need to create a nested drag/drop functionality using purely Javascript (No Jquery or other plugins please).

The Idea is to have a several div tags as groups and having ability to drag that div tag/group on top of another div tag/group to create a sub group within itself(as a child of that group) max level of sub subs allowed is 4. To Illustrate what I am talking about please look at this Jquery Plugin NestedSortabled example, It defines exactly what I am looking for.

NestedSortable Jquery Example

Another similar example: http://dbushell.com/2012/06/17/nestable-jquery-plugin/

I need to develop my code to function exactly like the example above, but using purely old school javascript only, please dont suggest any Jquery code.

Here is what I have currently working, However I am stuck right now and cant figure out how to get the sub grouping functionality to work. Please Help!!

My working Demo: http://jsbin.com/IzAfutI/1

My working Demo + Code: http://jsbin.com/IzAfutI/3/edit?html,css,js,output

Edit:

Let me example the code in more detail. StartDrag and StopDrag contain the main logic behind the functionality. Basically when user drags a div tag I am currently creating a container on top of or underneath a already existing div tag for the item that is to be dragged to be placed into, however when I use this same funcionality to create that container within another container(via creating sub group) I am getting an error. which means Maybe I am going at the problem the wrong way maybe my logic might be wrong or else something else wrong with the code.

HTML mark up of group div tag:

<div class="dragContainerUsed">
    <div id="a7b94a42-fb00-4011-bd5a-4b48e6e578c5" class="dragPanel">
        <input type="hidden" value="1|fa7989d7-1708-4a90-9bf6-c91f6cef6952" />
        <div onmousedown="startDrag(event, this.parentNode)" class="dragPanelHeader">
            <div style="margin-left:4px; margin-top:3px; float:left;">1 - Group 1<span id="gta7b94a42-fb00-4011-bd5a-4b48e6e578c5"></span></div>
        </div>
    </div>
    <div class=\"dragSubContainerUnUsed\"></div>
</div>
<div class="dragContainerUnUsed"></div>

So what I want to happen is when user drags another div on top of the div dragSubContainerUnUsed it should be placed within that subContainer....

On start drag, I create a array to store all the containers and subContainers:

containers = new Array();

subContainers = new Array();

containers.push(dragTarget);
for (i = 0; i < divs.length; i++) {
    if (divs[i].className.toLowerCase() == "dragcontainerunused") {
        containers.push(divs[i]);
    }
}

for (i = 0; i < divs.length; i++) {
    if (divs[i].className.toLowerCase() == "dragSubcontainerunused") {
        subContainers.push(divs[i]);
    }
}

and currently the part where I am stuck is in the functions onDrag and stopDrag, I dont know how to get the subContainers to work via to create the subgroups...

For Instance if I drag Group 3 on top of Group 2, I want group 3 to be a sub group of 2 Like this:

and I should be able to add max of 4 groups into each sub group, with max of 4 sub groups. like this:

and finally there should only be a max of 4 levels of subgrouping like this:

Please Help in anyway you can, if you can identify the problem than please tell me or if there needs to be a change in logic for my code tell me, Even if you can completely re-write/ create your own new code to make this application work would be very much appreciated. I have been trying to tackle this for a few days any and all help will be greatly accepted...

Answer 1

Check This code

function allowDrop(ev){

ev.preventDefault();

}

function drag(ev)
{

ev.dataTransfer.setData("Text",ev.target.id);


}

function drop(ev) 
{

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));


}


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>"

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">`