jQuery：从样式定义的位置动画到类定义的位置答案

【问题标题】：jQuery: Animating from a style-defined position to a class-defined positionjQuery：从样式定义的位置动画到类定义的位置
【发布时间】：2012-09-28 20:42:38
【问题描述】：

我在页面上有一些简单的拖放功能，您将一个元素拖放到目标区域，该元素将捕捉到目标区域内的指定位置。目前，我正在使用“drop”事件处理程序来完成此操作，该处理程序向具有正确位置的元素添加一个类，然后删除 jQuery 定义的位置样式（在拖动时定位元素）。因此元素被移动到正确的位置。

但是，我想给元素一个漂亮的动画，让它从你放置它的地方移动，而不是让它立即出现在新的地方。问题是 jquery 允许我从一种样式动画到另一种样式，或者从一个类到另一个类，但不能从一种样式动画到类。我试过这样做：

feature.addClass('selected');
feature.animate({
    'top': '',
    'left': '',
    'bottom': '',
    'right': ''
});

其中“选定”包含顶部和左侧的定义。但这样做是将元素移动到 0,0（而不是动画删除我想要的样式的过程）。

有人知道我该怎么做吗？我可以将坐标存储在元素数据中，但我希望它们在 CSS 中定义。或者，有没有一种方法可以使用 Javascript 从 CSS 中读取所选位置并动态存储它？即找出“对于这个元素，如果我要添加选定的类，top 和 left 的值是什么”。

【问题讨论】：

jQuery 已经从 css 中考虑了计算样式...
不确定您的意思？在元素被放下的那一刻，它的位置定义为 style="top: 50px; left: 50px"。我需要那种风格消失，以便使用底层类，我希望 jQuery 动画过程。
OP 希望动画化从用户放置元素的位置到它应该降落的正确坐标的过渡
您可以尝试获取所选坐标，例如 $('.selected').css('top') （然后也离开）。但是你需要一个占位符 div 所以 $('.selected') 返回一些东西。一旦你知道你应该去哪里，你就可以做动画。这意味着您需要在每个可放置的位置都有一个空的 div。可能有更好的方法来实现这一点
您可以使用.attr("style","") 清除任何内联样式。

标签： javascript jquery jquery-ui jquery-animate

【解决方案1】：

我假设由于您使用的是 jQuery，因此您正在使用 jQuery UI 来执行拖放功能。 $.draggable() 方法有一个选项，如下所示：

$( "#draggable" ).draggable({ revert: true });

更多信息来自这里：http://jqueryui.com/demos/draggable/#revert

【讨论】：

据我所知，revert 只会将元素移回原来的位置，而我想将它移到新的地方。

【解决方案2】：

感谢@Huangism 的想法，我让它像这样工作：

创建了一个不可见的“位置测试器”div
在初始化期间，将每个可拖动元素中的类复制到该 div，并使用它来测试它们将被拖放到的位置
将这些位置存储在可拖动元素中
然后，在放置处理程序中，我将元素的样式更新为那些存储的位置，允许我对其进行动画处理

【讨论】：