如何决定是否接受或拒绝可拖放到droppable中的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类img都是一个可拖动的,每个square类的div都是一个droppable.我已经有一个服务器端函数,给定一组坐标,如果移动有效则返回"VALID",否则返回"INVALID".我的想法是,如果服务器返回"INVALID",则该片必须返回其原始方块,如果服务器返回"VALID",则该片必须保留在其新的方块中,删除目标方块内的每个其他片段.

我的问题是,我不知道如何在我的jQuery代码中强制执行此返回值.我试图把功能于一体的revert可拖动的财产,并在accept和drop可投放的功能,但我还没有找到如何使$.get回报或真或假.

任何帮助将非常感激.

提前致谢,

莱斯特

Answer 1

没关系,回答.

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

第一:在可拖动定义中,在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;
            }
        }
    );
}

那就行了.

部分答案来自这里:在jQuery中,如何恢复ajax调用失败的可拖动？.