ajax调用后JQuery UI可拖动元素位置被重置答案

【问题标题】：JQuery UI draggable element position is reset after ajax callajax调用后JQuery UI可拖动元素位置被重置
【发布时间】：2014-03-09 23:31:01
【问题描述】：

我有一个可拖动的 div，我希望能够将其拖放到可放置的 div 中。

一旦放下，它就不再是可拖动的，它应该位于可放置 div 的中心。

我得到了这个工作，但我现在想在删除 div 时添加一个 AJAX 请求。如果 AJAX 调用成功，那么可拖动 div 应该不再是可拖动的，并且应该位于可放置 div 的中心。

使用我当前的代码，当我添加 AJAX 调用时，一切正常，然后可放置的 div 被放回它开始的位置。有谁知道我怎样才能阻止这种情况发生？

我有问题的演示here

代码如下：

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");
}

【问题讨论】：

标签： javascript jquery jquery-ui draggable droppable

【解决方案1】：

您必须将属性revert 设置为false

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

【讨论】：

我最初将其设置为 true，这样如果用户将其拖动到可放置 div 以外的任何位置，它就会恢复到其原始位置。删除 div 后，它调用 handleDrop 函数，该函数执行 AJAX 调用，然后调用将 revert 设置为 false 的 positionBox： ui.draggable.draggable('option', 'revert', false);这可以自己工作，但是当我引入 AJAX 调用时，它就停止工作了。

【解决方案2】：

最后我把它排序了，只需要将revert设置为“无效”而不是true：

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

然后移除 positionBox 函数中的 revert 选项。我已更新 fiddle 以反映解决方案以供将来参考。

【讨论】：