Dear All,
I have a number of span elements generated on the fly via ajax. My only problem now how to assign the drag and drop function to it.

Partly this is my jquery for drag and drop and this will not work for the elements generated below on the fly? Any idea please? I tried live it does not work.

PHP Code:
  $('.draggable').draggable({helper'clone'});
  $(
'.droppable').droppable({
    
drop: function(eventui) {
      var 
dest = $(this).find('img').attr('src');
      var 
hidden1=$(this).find('[name^="position"]').attr('value');
      
alert("Hidden 1 : "+hidden1+$(this).find('[name^="position"]').attr('name'));
      
      
      var 
source ui.helper.attr('src');
      
      $(
this).html('<span><span><b>R11</b><img class="draggable" src="tyre2.png" ><input type=hidden id="positionR11" name="positionR11" value="R11"><input type=hidden name="tyreIDR11" value="1"></span> ');
      
ui.draggable.parent().html('<span><b>R11</b><img class="draggable" src="tyre2.png" ><input type=hidden  id="positionR12" name="positionR12" value="R12"><input type=hidden name="tyreIDR11" value="1"></span> ');
      $(
'.draggable').draggable({helper'clone'});
      
addRows();
      
    }
  }); 
PHP Code:
echo "<span class='droppable'>";
                    echo 
"<b>".$loPosition."</b>";
                    echo 
"<img class='draggable' src='tyreImages/tyre2.png' >";
           echo 
"</span>"