Don't load content In X element
===

![layout][1]


  [1]: http://i.stack.imgur.com/77Ihb.png


My layout is like the above.

**1**, **2**, **3** and **4** divs can be dragged and dropped into any position **1-4** and in the **dock**. Now these are just php includes. When i drop them in the **dock** i use css to:

    display:none;

This hides everything in the div except the title. Perfect. However the content is still being loaded in the "background" and i plan on having plenty of these "widgets" and i can see this becoming a serious issue with loading all these content.

What i would like to happen is:

If dropped into **dock** then don't load everything between:

    <p><?php include('example.php'); ?></p>

But if dragged back into **1**, **2**, **3** or **4** then allow the content in the paragraph to be loaded.

I was thinking maybe getting the parent div using jQuery.

I just need a little push in the right direction in regards which language could solve my issue and maybe some simple examples. Now another thing would this be "dynamic" as in as soon as i drag it from the **dock** to **1**, **2**, **3** or **4**. It would instantly update or would i need to constantly reload either the page or this div to allow the content to check its location and decide whether it is allowed to load or not.

Thank you.