jquery-ui - 如何决定是接受还是拒绝可拖动的 jQuery 到可放置的

Question

我正在使用 jQuery，但遇到以下问题:

在我的网站上，我有一个棋盘棋子。每个方块都是一个简单的 div，带有背景属性来显示白色或黑色。在这些方块上(在 div 内)，我放置了一个 img 标签，引用必须位于该方块上方的部分。就像是:

<div id="a8" class="square" style="background-image: url('/images/background_white.png')">
<img id="piece_a8" class="piece" src="/images/rook_black.png" />
</div>

我可以使用 jQuery 控制碎片的移动。每piece -class img 是一个可拖动的并且每个 square -class div 是一个 droppable。我已经有一个服务器端函数，给定一组坐标，返回 “有效”如果移动有效，则 “无效”否则。我的想法是，如果服务器返回“无效”，则该棋子必须返回其原始方格，如果服务器返回“有效”，则该棋子必须留在其新方格中，删除目标方格内的所有其他棋子。

我的问题是，我不知道如何在我的 jQuery 代码中强制执行这个返回值。我试过将函数放入 revert可拖动的属性，在 accept 中和 drop droppable 的功能，但我还没有找到如何制作 $.get返回假或真。

任何帮助将非常感激。

提前致谢，

莱斯特

Answer 1

没关系，回答。

如果有人需要知道，诀窍分为两部分:

第一:在draggable定义中，在start事件下，添加一个保存原位置的函数。像这样:

$('item_to_drag').draggable({
    start: function(){
        $(this).data("origPosition",$(this).position());
    }
});

第二:在 droppable 定义中，在 drop 事件下，做你的 .get 并使用一个函数来处理答案；如果不满足您的条件，请将可拖动对象动画化回其原始位置。像这样:

drop: function (event, ui) {
        $.get(url,function(data) {
            if (data == '"INVALIDO"')
            {
                ui.draggable.animate(ui.draggable.data("origPosition"),"slow");
            }
            else
            {
                //store new positions, whatever;
            }
        }
    );
}

这样就行了。

部分答案来自这里:In jQuery, how to revert a draggable on ajax call failure? .