Please help, I have been trying to tackle this problem for a few days now:


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.

http://mjsarfatti.com/sandbox/nestedSortable/

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

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:

Code:
        <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:
Code:
    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...