如何决定是接受还是拒绝 jQuery 可拖动到可放置对象

Posted 2023-05-08

【中文标题】如何决定是接受还是拒绝 jQuery 可拖动到可放置对象

【英文标题】：How to decide whether to accept or reject a jQuery draggable into a droppable

【发布时间】：2011-07-31 16:16:17

【问题描述】：

我正在使用 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 都是可放置的。我已经有一个服务器端函数，给定一组坐标，如果移动有效则返回 "VALID"，否则返回 "INVALID"。我的想法是，如果服务器返回“INVALID”，则该棋子必须返回其原始方格，如果服务器返回“VALID”，则该棋子必须留在新方格，删除目标方格内的所有其他棋子。

我的问题是，我不知道如何在我的 jQuery 代码中强制执行此返回值。我已经尝试将函数放入可拖动的revert 属性，以及可放置的accept 和drop 函数中，但我还没有找到如何使$.get 返回false 或true。

任何帮助将不胜感激。

提前致谢，

莱斯特

【参考方案1】：

没关系，回答。

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

首先：在可拖动定义中，在开始事件下，添加一个保存原位置的函数。像这样：

$('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?。

【讨论】：

你错过了展示你如何将 finalPosition 传递给你的服务