Jquery drop and drag functionality

Jquery drop and drag functionality

Hi all, im hoping you can help me out, im new to jquery, im from a php background,
i am working on a drop and drag function within admin panel ( its a cms im working on),
the basic idea behind this is simple, butn ot sure how to do the jquery progrmaming,
i have some div boxes which are draggable, on dropping these div boxes i am looking to insert some different div boxes via a innerHTML function or call a class to insert the div boxs.

I have looked around, google it, looked over the jquery + ui website, tried code out, this is what i have so far

these are the draggable div boxs
<div id="draggable-' .$res['module_id'].'" class="external-event bg-green ui-draggable"><p>' </div>

these are the droppable boxs
 <div id="modules"><div class="mid" id="droppable-1">
         <p>Drop here</p>
      </div></div>

i have these jquery scripts

   <script>
         $(function() {
            $( "#draggable-1" ).draggable();
             $( "#draggable-2" ).draggable();
              $( "#draggable-5" ).draggable();
            $( "#droppable-1" ).droppable();
        });


      </script>
addEvent(drop, 'droppable', function (e) {
    if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
    this.innerHTML = "<div class="test">test</div>;

any help would be appreciated,
thank you