使用网格恢复“无效”不会使用 jQuery UI Draggable 返回到起始位置

Posted 2023-05-08

【中文标题】使用网格恢复“无效”不会使用 jQuery UI Draggable 返回到起始位置

【英文标题】：revert 'invalid' with grid doesn't return to start position with jQuery UI Draggable

【发布时间】：2011-12-27 12:29:49

【问题描述】：

简而言之，如果您将 draggable 与网格一起使用并在可拖动项目上设置 revert: 'invalid'，它们不会返回到您开始拖动它们的完全相同的位置。它们会回到靠近你开始拖动它们的地方……很奇怪。

这很可能是 UI 中的错误。如果是这样，有人知道是否有解决方法吗？

示例： http://jsfiddle.net/n2AUv/11/

谢谢！ 约翰。

【问题讨论】：

只要grid 或revert，一切都表现得很好，但是当你同时拥有两者时，所有的感觉都会消失。它返回的位置似乎是随机的。我们看到的是完全一样的废话吗？

这就是我所看到的......这令人沮丧，因为它对我的项目来说有点阻碍。

我将其称为错误并进行错误报告，当前的行为根本没有任何意义。当它们被丢弃时，你可以重新设置元素吗？这可能会有所帮助，负偏移量（使用您的 DOM 检查器，您会看到它们）可能会造成混淆。

bugs.jqueryui.com/ticket/4696 Bug 归档 > 2 年前并设置为 'wontfix' - 这表明我错了。有什么想法吗？ ://

"这些选项在重写中将不存在。"我对此有回应，但它不适合像 SO 这样的礼貌论坛。 github.com 上的某个地方是否有重写的测试版？

【参考方案1】：

grid option documentation 说：

将拖动的 helper 捕捉到网格，每 x 和 y 像素。

所以看起来grid 被设计为仅与某种助手一起使用。真的，如果你使用helper: "clone" 事情很好：助手返回原始实例的位置附近并且

是的，这看起来像是 UI 中的错误。 但是有一个解决方法：use helper for dragging:

$(".dragme").draggable(
    revert: true,
    helper: "clone",
    grid: [50,50]
);

此解决方法引入了其他奇怪的错误：在可放置区域助手上的有效放置被破坏并且原始实例存在于它的位置之后（您可以在 fiddle 看到它）。

这个错误以某种方式解决了 draggable 与 connectToSortable 选项。也许也可以解决您的问题。

另外，我怀疑整个混乱是因为 this chunk of code 在可拖动。

【讨论】：

@John Hunt 如果有帮助，这里对 yko 的代码进行了调整，将拖动的元素正确放置在放置目标 div 中的正确位置（使用绝对定位）：jsfiddle.net/greglockwood/EBHWr

@GregL 非常好。我实际上认为drop 会在任何下降时触发，不仅有效。看起来我的解决方案与您的解决方案相结合可以解决这个问题。你不介意我在回答中将它们组合在一起吗？

一点也不。接受你的答案并接受它是很有趣的。你不能分割赏金，对吗？ :-)

@JohnHunt 谈论隐藏原始实例：只需使用draggable 的start 和stop 事件来隐藏和恢复原始实例：jsfiddle.net/8Q5WX/3 另请注意：此小提琴基于@GregL 之一。最终解决方案看起来有点脏，但可以。

大声笑，我们都想出了相同的解决方案。 :-) 大智若愚。