0

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

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

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

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

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

4

2 回答 2

2

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

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

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

于 2012-09-28T20:49:46.547 回答
0

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

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