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

Question

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

0

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

Как только вы уроните его, его больше нельзя перетаскивать, и он должен располагаться в центре отбрасываемого div.

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

С моим текущим кодом, когда я добавляю вызов AJAX, все работает нормально, а затем droppable 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");
}

Paul Kerrison 10 март 2014, в 01:20

Источник

Теги:

javascript

jquery

jquery-ui

draggable

droppable

2 ответа

1

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

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

Stef Chäser 10 март 2014, в 07:44

0

Первоначально я установил для него значение true, чтобы, если пользователь перетаскивает его куда-либо, кроме элемента DROPABLE DIV, он возвращается в исходное положение. После удаления div он вызывает функцию handleDrop, которая выполняет вызов AJAX, затем вызывает positionBox, который устанавливает для return значение false: ui.draggable.draggable ('option', 'revert', false); Это работает само по себе, но когда я представляю вызов AJAX, он перестает работать.
Paul Kerrison 10 март 2014, в 11:25

Ещё вопросы

Первоначально я установил для него значение true, чтобы, если пользователь перетаскивает его куда-либо, кроме элемента DROPABLE DIV, он возвращается в исходное положение. После удаления div он вызывает функцию handleDrop, которая выполняет вызов AJAX, затем вызывает positionBox, который устанавливает для return значение false: ui.draggable.draggable ('option', 'revert', false); Это работает само по себе, но когда я представляю вызов AJAX, он перестает работать.

Paul Kerrison · Accepted Answer · 2014-03-10T16-05-00.000Z

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

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

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