Положение перетаскиваемого элемента JQuery UI сбрасывается после вызова ajax

Question

У меня есть перетаскиваемый div, который я хочу перетаскивать в выпадающий div.

После того, как он упал, он больше не должен быть перетаскиваемым, и его следует расположить в центре выпадающего элемента div.

Я получил это работает, но теперь я хочу добавить AJAX-запрос, когда div удаляется. Если вызов AJAX успешен, перетаскиваемый div больше не должен быть перетаскиваемым и должен располагаться в центре сбрасываемого div.

С моим текущим кодом, когда я добавляю вызов AJAX, все работает нормально, а затем сбрасываемый div возвращается обратно в исходное состояние. Кто-нибудь знает, как я могу остановить это?

У меня есть демо проблемы здесь

Код выглядит следующим образом:

HTML

<div id="playingArea" class="droppable">Drop in here</div>

<div id="player" class="draggable">Drag Me</div>

CSS

#playingArea{
    border:1px solid black;
    min-height: 150px;
    min-width: 150px;
    margin-bottom: 30px;
}

#player{
    border:1px solid red;
    height: 50px;
    width: 50px;
}

Javascript

$(function() {
    $('.draggable').draggable({
        containment : 'document',
        cursor : 'move',
        revert : true
    });

    $('.droppable').droppable({
        accept : '.draggable',
        hoverClass : 'hovered',
        drop : handleDrop
    });
})

function handleDrop(event, ui) {
    $.ajax({
        url : "/echo/json/",
        dataType : 'json',
        error : function(data, errorThrown) {
            alert('request failed :' + errorThrown);
        },
        success : function(data) {
            positionBox(event, ui);
        }
    });
}

function positionBox(event, ui) {
    ui.draggable.draggable('disable');
    ui.draggable.position({
        of : $("#playingArea"),
        my : 'center',
        at : 'center'
    });
    ui.draggable.draggable('option', 'revert', false);
    $("#player").css({
        opacity : 1
    })
    alert("looks ok now - but it won't stay here");
}

Answer 1

В конце концов я получил сортировку, просто нужно было установить значение "недействительный" вместо "true":

$('.draggable').draggable({
    containment : 'document',
    cursor : 'move',
    revert : "invalid"
});

а затем удалите опцию возврата в функции positionBox. Я обновил скрипку, чтобы отразить решение для дальнейшего использования.

Answer 2

Вы должны установить атрибут revert в false

$('.draggable').draggable({
    containment : 'document',
    cursor : 'move',
    revert : false
});