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: /

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:

My working Demo + Code: ,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 pletely 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...

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./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./IzAfutI/1

My working Demo + Code: http://jsbin./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 pletely 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...

• javascript

• 1 SO questions need to have code within the question, not on an external site. What exactly is the problem? This sounds like a simple case of dragNode.parentNode.removeChild(dragNode); dropNode.appendChild(dragNode). – cimmanon Commented Sep 10, 2013 at 15:45
• My Problem is I am trying to figure out the Logic/Code required for me to create sub grouping to work within my code, Currently you can drag/drop each individual groups, But I want to be able to drag a group onto/into each other alas creating sub groups within themselves with a max level of 4 subgroups – Prakash Chennupati Commented Sep 10, 2013 at 15:52
• I think you might get more answers if you spot the problem by yourself and ask some more specific questions (and shorter maybe?) – Mahdi Commented Sep 12, 2013 at 16:43
• well thats just it, the code I posted above using the subContainers is what i tired to do to create the sub grouping, but when i implement it breaks the existing way the drag/drop works which means I might not be approaching this the right way. – Prakash Chennupati Commented Sep 12, 2013 at 16:56
• 1 i will be honest asking how to do this w/o jquery, is asking "how do i create manipulable 3d images in plain html - i dont know css/js/jquery or java/flash". – Math chiller Commented Sep 18, 2013 at 20:51

4 Answers 4

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">`

Been working on this, pleted it couple of months ago. but forgot about this post. so i decided to post the plete solution for anyone else that might be looking for a answer to this enjoy.

The entire code is too long to post it in here, but here is the link to the code: Drag/Drop Functionality with Div Tags

DEMO: http://jsbin./aTUHULu/1

You have to divide the drop rectangle into 4 areas , if you drop it in the first one it will be on level 1 and if you drop it on the next 40px lets say it will be considered level 2 and hence

I would post the code as well if you want but I think the approach itself would work if you try and implement it. Here is the approach

Instead of div, add the item as a listitem