Question

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

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

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

使用我当前的代码，当我添加AJAX调用时，一切正常，然后droppable 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");
}

Answer 1

您必须将属性revert设置为false

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

Answer 2

我最后将它排序，只需将恢复设置为“无效”而不是真实：

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

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

在ajax调用之后重置JQuery UI可拖动元素位置

2 个答案: