0

我正在尝试使用 jQuery UI 拖放 div 后对其进行动画处理。我正在使用 jQuery UI docs () 中的“停止”事件。

但是，我真的很难让已经放下的对象能够对其进行动画处理。这是我目前所处的位置，尽管我尝试了几件似乎不起作用的事情：

        $('.item').draggable({
            stop: function (event, ui) {
                $(ui.draggable).animate({ bottom: 0 }, { duration: 1000, easing: 'easeOutBounce' });
            }
        });

这是使用 jQuery 1.9.0 和 jQuery UI 1.10.0。

我确信这一定很简单——我就是无法让它工作。

4

2 回答 2

1

两个问题，这里是固定代码：

 $('.item').draggable({
            stop: function (event, ui) {
                $(this).animate({ "top": "0px" }, { duration: 1000, easing: 'easeOutBounce' });
            }
        });

首先 - ui.draggable 实际上并没有选择任何东西，而是返回未定义。更改为this影响拖动的元素。

此外，jQuery 没有读取 CSS 属性bottom。你必须以某种方式使用top才能达到你想要的效果。以同样的方式，left会工作，但right不会。

小提琴：http: //jsfiddle.net/klatzkaj/kjtD8/

于 2013-01-28T15:53:43.437 回答
0

更改ui.draggable（这没什么）this，它会影响拖动的 div。请注意，根据您的布局，动画可能不会出现，但我可以让它与此一起使用：

http://jsfiddle.net/T4UDp/

由于可拖动本身发生变化top，bottom: 0因此单独不起作用。

于 2013-01-28T15:50:51.540 回答