A challenge perhaps?

A challenge perhaps?

I'm working on a website which requires a chunk of code, the nature of which is proving to greatly exceed my limited knowledge of JQuery. The structure of the site is as follows (not quite sure if this is optimally structured for what needs to be done with it, JQuery-wise):

  1. <script>
  2. $(function() {
  3. $(".menutype,.contenttype").draggable({revert:true});
  4. $(".content").droppable({accept:".menutype,.contenttype"});
  5. $(".content").droppable({
  6. drop:function(event,ui){
  7. $(this)
  8. $('div.content').attr('id', 'contenthover')
  9. .find( "p" )
  10. .html( "Dropped!" );
  11. }
  12. });
  13. });
  14. </script>
  15. <body>

  17. <div class="header"><p>///HEADER///</p></div>

  19. <div class="container">
  20. <div class="wrapper1">
  21. <div class="wrapper2">

  23. <div class="content">
  24. <p>///CONTENT///</p>
  25. </div><!-- END "content" -->

  27. <div class="menuL">
  28. <div class="menutype-container">
  29. <div class="menutype"></div>
  30. <div class="menutype"></div>
  31. <div class="menutype"></div>
  32. <div class="menutype"></div>
  33. </div><!-- END "menutype-container" -->
  34. </div><!-- END "menuL" -->

  36. <div class="menuR">
  37. <div class="contenttype-container">
  38. <div class="contenttype"></div>
  39. <div class="contenttype"></div>
  40. <div class="contenttype"></div>
  41. <div class="contenttype"></div>
  42. </div><!-- END "contenttype-container" -->
  43. </div><!-- END "menuR" -->

  45. </div><!-- END "wrapper2" -->
  46. </div><!-- END "wrapper1" -->
  47. </div><!-- END "container" -->

  49. <div class="footer"><p>///FOOTER///</p></div>

  51. </body>

The basic premise is that once one of the "menutype" DIVs is dropped within the droppable area, a corresponding menu structure is revealed in the content DIV. Similarly, once dropped, "contenttype" shows the inline content within that menu.

At this point i'm stumped as to how I go about achieving this. My main problem is that I do not know how to differentiate the menu and content types within the .droppable, as I only know how to define which items it accepts, and not what to individually do with draggable items.

I'm not expecting someone to spit out the necessary code, but some pointers or examples would be greatly appreciated.