jquery ui drag and drop + ajax problem

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?

我正在制作棋盘游戏，而且我正在使用jquery ui draggable effect for figures。在拖动开始时，我将ajax请求发送到我生成可放置位置的其他页面，因此图形可以仅在那些特定位置拖动和下垂，但问题是我必须移动图形两次才能生效。有谁知道如何解决这个问题？

I would be very grateful for help.

我非常感谢你的帮助。

here is a sample

这是一个样本

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

$（“。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) 
{   


}

});

}）;

1 个解决方案

#1

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

我已经在$（'。selector'）中找到了一个灵魂元素.dragggable（{refreshPositions：true}）;