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'});