Drag n drop behaving differently after ajax call

Dear All,
I have page here Untitled Document where when I select the drop down list value it will reassign the drag and drop function but it behave differently from this link [url=http://183.78.169.53/tm/getTyreLayoutDetails1.php?l=3]Untitled Document where it drag and drop only on the picture and the drag image does not disappear?

Dear Aussie,
I know because just based on try and error I added this into the droppable part. I want to learn few things from you now. So for both drop and drop is this still codes still needed $(this).droppable(); and $(this).draggable();. So next thing what is it that when I add the original function in the loop it works. What is logic behind it ?

$(‘.t1 span.droppable’).each(function(){
//alert(“DROP”);
$(this).droppable();
$(‘.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();

I just refreshed your page and once I drop an item it seems to work for me. (though it comes up with “Hidden 1 : undefinedundefined” in the first alert.)

Dear Assusie,
I have tried this is much better now. The problem now when I drag n drop the alert("Hidden 1 : "+hidden1+$(this).find(‘[name^=“position”]’).attr(‘name’)); does onot appear. What else must I do ya?

$(‘.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();
  
}

});

$(“select#vehicleLayoutID”).change(function(){
var data = $(this).val();
$vehicleLayoutIDArray=$(‘#vehicleLayoutID’).val().split(“#”);;
//alert(“value :”+$vehicleLayoutID);
//alert(“value :”+$(‘#vehicleLayoutID’).val());
$.post(‘getTyreLayoutDetails.php’, {l: $vehicleLayoutIDArray[0]}, function(data){
$(‘#layoutDetails’).html(data);

		$('.t1 span.droppable').each(function(){
			//alert("DROP");
			$(this).droppable();

		});
		$('.t1 span img.draggable').each(function(){
			//alert("drag");
			 $(this).draggable();
     $('.draggable').draggable({helper: 'clone'});
		});
	});	
});

I think what’s happening there is that when you reinit the code you call

 $(this).draggable();

You probably want to add the “helper” option like you have earlier on in the script:

$('.draggable').draggable({helper: 'clone'});