Databases
StackOverflow2013
Postsdbo
POHow to drag a div that contains other divs that were dragged into it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to drag a div that contains other divs that were dragged into it?
    text
    copied!<p>I'm trying to solve for a problem, and haven't had much luck figuring it out on my own.</p> <p>I have several container divs on my page. The "ItemContainer" holds "items" that are draggable. The "MainHome" holds a secondary "ItemContainer" (where the "items" are to be dragged to) as well as some other divs. The "MainHome" is also draggable into a "Playarea". What I need to have happen, is when "items" are dragged into the "ItemContainer" contained within the "MainHome" they need to be attached to it so that if "MainHome" is then dragged, those items drag with it.</p> <p>They will need to remain individually draggable as well.</p> <p>Here is my generic code:</p> <pre><code>&lt;div id="leftrail"&gt; &lt;div id="manager"&gt; &lt;div id="somediv"&gt; &lt;h2&gt;Text&lt;/h2&gt; &lt;div id="bubble"&gt;Text Here&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div id="ItemContainer"&gt; &lt;div id="Item1"&gt;Item 1&lt;/div&gt; &lt;div id="Item2"&gt;Item 2&lt;/div&gt; &lt;div id="Item3"&gt;Item 3&lt;/div&gt; &lt;div id="Item4"&gt;Item 4&lt;/div&gt; &lt;div id="Item5"&gt;Item 5&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;h2&gt;Section Title&lt;/h2&gt; &lt;div&gt; &lt;div id="MyContainer"&gt; &lt;div id="SecondaryItemContainer"&gt;Drag Items Here&lt;/div&gt; &lt;div&gt;Some text&lt;/div&gt; &lt;div&gt;Some more text&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="MainContent"&gt; &lt;div&gt;Some stuff here&lt;/div&gt; &lt;div&gt;Some stuff here&lt;/div&gt; &lt;div&gt;Some stuff here&lt;/div&gt; &lt;div id="BigContainer"&gt;Drag the MyContainer Here&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The full demo here: <a href="http://jsfiddle.net/j6pVG/1/" rel="nofollow">http://jsfiddle.net/j6pVG/1/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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