不要在X元素中加载内容

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.

If you want to find out what element you are landing in when you do the drop, it's ->

$('element').droppable({
  //other logic
  drop: function(event, ui){
    //$(this) is now the element you just dropped nito
    if($(this).prop('id') == 'dock'){
      console.log("This is the Dock...We don't add content here.");
    }else{
      //function to pull data to your container...$.load() or whatever
    }
  }
});