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

JQuery UI draggable element position is reset after ajax call

本文关键字：调用 ajax 位置 UI 拖动 元素 JQuery      更新时间：2023-09-26

我有一个可拖拽的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");
}

您必须将属性revert设置为false 

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

最后我把它排序了，只需要将revert设置为"invalid"而不是true:

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

，然后删除positionBox函数中的revert选项。我已经更新了小提琴，以反映未来参考的解决方案

相关文章：