Databases
StackOverflow2013
Postsdbo
PODrag/Drop Functionality with div tags purely using javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrag/Drop Functionality with div tags purely using javascript
    primarykey
    data
    text
    <p>I need to create a nested drag/drop functionality <strong>using purely Javascript</strong> (No Jquery or other plugins please).</p> <p>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.</p> <p><a href="http://mjsarfatti.com/sandbox/nestedSortable/" rel="nofollow noreferrer">NestedSortable Jquery Example</a></p> <p>Another similar example: <a href="http://dbushell.com/2012/06/17/nestable-jquery-plugin/" rel="nofollow noreferrer">http://dbushell.com/2012/06/17/nestable-jquery-plugin/</a></p> <p>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.</p> <p>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!! </p> <p><strong>My working Demo:</strong> <a href="http://jsbin.com/IzAfutI/1" rel="nofollow noreferrer">http://jsbin.com/IzAfutI/1</a></p> <p><strong>My working Demo + Code:</strong> <a href="http://jsbin.com/IzAfutI/3/edit?html,css,js,output" rel="nofollow noreferrer">http://jsbin.com/IzAfutI/3/edit?html,css,js,output</a></p> <p><strong>Edit:</strong></p> <p>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. </p> <p>HTML mark up of group div tag:</p> <pre><code>&lt;div class="dragContainerUsed"&gt; &lt;div id="a7b94a42-fb00-4011-bd5a-4b48e6e578c5" class="dragPanel"&gt; &lt;input type="hidden" value="1|fa7989d7-1708-4a90-9bf6-c91f6cef6952" /&gt; &lt;div onmousedown="startDrag(event, this.parentNode)" class="dragPanelHeader"&gt; &lt;div style="margin-left:4px; margin-top:3px; float:left;"&gt;1 - Group 1&lt;span id="gta7b94a42-fb00-4011-bd5a-4b48e6e578c5"&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=\"dragSubContainerUnUsed\"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="dragContainerUnUsed"&gt;&lt;/div&gt; </code></pre> <p>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....</p> <p>On start drag, I create a array to store all the containers and subContainers:</p> <pre><code>containers = new Array(); subContainers = new Array(); containers.push(dragTarget); for (i = 0; i &lt; divs.length; i++) { if (divs[i].className.toLowerCase() == "dragcontainerunused") { containers.push(divs[i]); } } for (i = 0; i &lt; divs.length; i++) { if (divs[i].className.toLowerCase() == "dragSubcontainerunused") { subContainers.push(divs[i]); } } </code></pre> <p>and currently the part where I am stuck is in the functions <code>onDrag</code> and <code>stopDrag</code>, I dont know how to get the subContainers to work via to create the subgroups...</p> <p>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: <img src="https://i.stack.imgur.com/CxnyU.png" alt="enter image description here"></p> <p>and I should be able to add max of 4 groups into each sub group, with max of 4 sub groups. like this: <img src="https://i.stack.imgur.com/SLi1g.png" alt="enter image description here"> </p> <p>and finally there should only be a max of 4 levels of subgrouping like this: <img src="https://i.stack.imgur.com/gqLjw.png" alt="enter image description here"></p> <p>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...</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USpbaris
    1. USPrakash Chennupati
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODrag/Drop Functionality with div tags purely using javascript
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODrag/Drop Functionality with div tags purely using javascript
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. PODrag/Drop Functionality with div tags purely using javascript
      1. USPrakash Chennupati
      1. VTFavorite
    1. COSO 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)`.
      singulars
      1. PODrag/Drop Functionality with div tags purely using javascript
      1. UScimmanon
    2. COMy 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
      singulars
      1. PODrag/Drop Functionality with div tags purely using javascript
      1. USPrakash Chennupati
    3. COI think you might get more answers if you spot the problem by yourself and ask some more specific questions (and shorter maybe?)
      singulars
      1. PODrag/Drop Functionality with div tags purely using javascript
      1. USMahdi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload