Assign drag and drop on the fly span elements

JavaScript
1

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.

  $('.draggable').draggable({helper: 'clone'});
  $('.droppable').droppable({
    drop: function(event, ui) {
      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();
      
    }
  });

echo "<span class='droppable'>";
		            echo "<b>".$loPosition."</b>";
	            	echo "<img class='draggable' src='tyreImages/tyre2.png' >";
	       echo "</span>";