SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 Untitled Document where it drag and drop only on the picture and the drag image does not disappear?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I think what's happening there is that when you reinit the code you call
    Code JavaScript:
     $(this).draggable();

    You probably want to add the "helper" option like you have earlier on in the script:
    Code JavaScript:
    $('.draggable').draggable({helper: 'clone'});
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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'});
    });
    });
    });

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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();


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •