.delete() doesn't seem to want to work

.delete() doesn't seem to want to work

Hi all

I have a nested list of sortable list.

What i'm trying to do is delete a list item by dragging it to a drop box area.

But for some reason when its not firing to delete, Weird

This is my code:

Javascript

<script type="text/javascript" src="jquery-1.3.js"></script>
   
   <script type="text/javascript" src="ui/ui.core.js"></script>
   <script type="text/javascript" src="ui/ui.draggable.js"></script>
   <script type="text/javascript" src="ui/ui.droppable.js"></script>
   <script type="text/javascript" src="ui/ui.sortable.js"></scri

<script>

$(document).ready(function(){
   $("#page-group").sortable({
      handle:'h2',
      accept : '.page-list'
   });
   
   
   $(".sub-page").sortable({
      connectWith: ['.sub-page'],
      accept : '.a-page'
      });
   
   $("#make-page").droppable({
      accept: ".sub-page div",
      drop: function(event, ui) {
         $('#helper').html('item dropped '+$(ui.draggable).attr('id'));
         $(ui.draggable).remove();
      }
   });

});
</script>


html code

<div id="make-page">Drag sub page here to make a page</div>
   
   <div id="page-group">
   
   <div id="m_1" class="page-list">
      
      <h2>Handle</h2>
      
      <div class="sub-page">
      
         <div class="none a-page"></div>
      
         <div id="id_1" class="a-page">Page One</div>
      
         <div id="id_2" class="a-page">Page Two</div>
      
         <div id="id_3" class="a-page">Page Three</div>
      
         <div id="id_4" class="a-page">Page Four</div>
      
         <div id="id_5" class="a-page">Page Five</div>
      
      </div>
      
   </div>
   
   
   <div id="m_2" class="page-list">
      
      <h2>Handle</h2>
      
      <div class="sub-page">
      
         <div class="none a-page"></div>
         
         <div id="id_6" class="a-page">Page Six</div>
      
         <div id="id_7" class="a-page">Page Seven</div>
      
         <div id="id_8" class="a-page">Page Eight</div>
      
         <div id="id_9" class="a-page">Page Nine</div>
      
         <div id="id_10" class="a-page">Page Ten</div>
      
      </div>
      
   </div>
   
</div>

<div id="helper">helpful info here</div>

puzzled
Any help on this as i'm really