CODEWITHSUNDEEP
javascript
Prakash Chennupati
Prakash Chennupati

Reputation: 3226

Drag/Drop Functionality with div tags purely using javascript

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: enter image description here

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

and finally there should only be a max of 4 levels of subgrouping like this: enter image description here

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

Upvotes: 5

Views: 6179

Answers (4)

Prakash Chennupati
Prakash Chennupati

Reputation: 3226

Been working on this, completed it couple of months ago. but forgot about this post. so i decided to post the complete 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.com/aTUHULu/1

Upvotes: 1

Priyank Vyas
Priyank Vyas

Reputation: 71

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

Upvotes: 2

sino
sino

Reputation: 776

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

Upvotes: 0

Ankit
Ankit

Reputation: 6654

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

  • . This would auto intend the control and it would be very easy for you to parse it at the end. What you need to do here is that onDrop, take the text (and other properties) from the div, create a li and add the div in that li. This would enable your code to redrag and drop the div further. Note - remember to remove the li (or ul according to the parent of div) when drag ends.

    Upvotes: -1

    • Related Questions