Question

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

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

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

其中“selected”包含top和left的定义。但是它的作用是将元素移动到0,0（而不是动画删除样式的过程，这是我想要的。）

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

Answer 1

我假设你使用的是jQuery，你使用jQuery UI来执行拖放功能。 $ .draggable（）方法有一个选项，如下所示：

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

Answer 2

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