仅当将可拖动对象拖到无效的可放置对象上时，如何才能使可拖动对象恢复到原始位置？答案

【问题标题】：How do I get a draggable to revert to the original position only if it was dragged onto an invalid droppable?仅当将可拖动对象拖到无效的可放置对象上时，如何才能使可拖动对象恢复到原始位置？
【发布时间】：2011-11-29 16:23:23
【问题描述】：

我有一个元素我想允许被拖到任何地方。但是，如果它被拖放到拒绝它的 droppable 上（通过接受），我希望它在拖动之前恢复到原始位置。我怎样才能做到这一点？

编辑：更具体地说：我希望满足两个条件才能将项目移回：1. 它被丢弃在可放置物品上，2. 可放置物品不接受所述物品。 Draggable 的 revert 选项只检查条件 2。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

我有一些我认为应该可以工作的代码。请注意，它不使用accept 选项来指定droppables 将接受哪些draggables。相反，您必须在 drop 事件中检查是否应手动拒绝可拖动对象。

$(文档).ready(函数() { $('.droppable-class').droppable({ 下降：函数（事件，用户界面）{ // 检查是否应该在此处拒绝可拖动... 如果（...） { ui.draggable.data('rejected', true); } } }); $('.draggable-class').draggable({ 还原：假，开始：函数（事件，用户界面）{ ui.helper.data('拒绝', false); ui.helper.data('原始位置', ui.helper.offset()); }, 停止：函数（事件，用户界面）{ if (ui.helper.data('rejected') === true) { ui.helper.offset(ui.helper.data('原始位置')); } } });

【讨论】：

有没有办法在它原来的地方淡入可拖动的地方？我试图改变显示：无/块；设置但随后它会改变其他元素的流程。谢谢！

【解决方案2】：

你想使用 sortable dude - 比如：

    $('#sortable-area').sortable({
    accept: '.child',
    items: '.child',
    revert: 300,
    opacity: 0.8,
    containment: 'document'
});

如果它不足以替换其他元素之一，这应该会自动将元素捕捉回来。你只要把它放在容器上

【讨论】：

要指出 - 你可能会摆脱可拖动，上面的'revert'选项是设置元素在没有遇到它的可放置父项时返回的速度
问题是我想允许将项目移动到可排序不允许的空白空间
没关系 - 尝试使用 draggable 但给它我在之前的评论中提到的 revert 选项，甚至可能有一个 true/false 选项。
我希望满足两个条件才能将项目移回：1. 它被放置在可放置物品上，2. 可放置物品不接受所述物品。 Revert 仅检查条件 2。