jquery ui drag and drop + ajax problem

Question

I'm making board game and i'm using jquery ui draggable effect for figures. On drag start I send ajax request to other page where I generate droppable places soo the figure can be drag and droped only on those particular places, but the problem is I must move figure twice to take effect. Does anyone know how to solve this problem?

I would be very grateful for help.

here is a sample

$(".draggable2").draggable({ revert: 'invalid', start: function(event, ui) {
var droppable_areas = "";

    for(var i = 0; i < array.length; i++)
    {
        //node
        var val1 = array[i].split(" ")[0];

        //node
        var val2 = array[i].split(" ")[1];  

        if(val1 == figure_ID) { 
            droppable_areas += val2 + ",";
        }

        if(val2 == figure_ID) {
            droppable_areas += val1 + ",";
        }
    }

    //droppable area
    $.post("map_positions.php", { droppable_areas: droppable_areas },
        function(data) {
            $("#imap").html(data);

            $(".droppable").droppable({                     
                drop: function(event, ui) {         

                    //id draggable element
                    var draggable_ID = ui.draggable.attr("id");
                    var moveFrom = draggable_ID.split("_")[1];                  
                    //console.log("Move from: " + moveFrom);

                    $(ui.draggable.element).remove();

                    //id droppable palces
                    var value = $(this).attr("id");
                    var moveTo = value.split("_")[1];   

                    //console.log("Move to: " + moveTo);

                    for(var i = 0; i < array.length; i++){
                        //nod
                        var val = array[i].split(" ")[0];

                        //nod
                        var val2 = array[i].split(" ")[1];                                  

                        var moveWith = array[i].split(" ")[2];  

                        if(((val == moveFrom) && (moveTo == val2)) || ((val2 == moveFrom) && (val == moveTo))){                                 

                            ui.draggable.attr("id","p_"  + moveTo); 

                            $("#p_" + moveTo ).draggable("disable");
                             break;
                        }                   


                    }                           


                }
            });

        }
    );


},
stop: function(event, ui) 
{   


}

});

Answer 1

i already found a souliton in $('.selector').draggable({ refreshPositions: true });