jquery ui可拖动在停止时减速答案

【问题标题】：jquery ui draggable deaccelerate on stopjquery ui可拖动在停止时减速
【发布时间】：2011-07-06 20:31:43
【问题描述】：

我正在使用 jquery ui draggable 来拖动一个 div。阻力停止后平稳缓解阻力的最佳方法是什么？假设阻力突然停止。

谢谢

【问题讨论】：

标签： jquery-ui jquery-ui-draggable

【解决方案1】：

使用缓动实现可拖动可能对您有用。这是我对上一个帖子的回答的简化解决方案，更具体：

JQuery draggable with ease

HTML：

<div id="draggable">
</div>

CSS：

#draggable {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: whitesmoke;
    border: 2px solid silver;
}

Javascript：

$(function() {
    $("#draggable").draggable({
        helper: function(){
            // Create an invisible div as the helper. It will move and
            // follow the cursor as usual.
            return $('<div></div>').css('opacity',0);
        },
        drag: function(event, ui){
            // During dragging, animate the original object to
            // follow the invisible helper with custom easing.
            var p = ui.helper.position();
            $(this).stop().animate({
                top: p.top,
                left: p.left
            },1000,'easeOutCirc');
        }
    });
});

jsFiddle 演示：http://jsfiddle.net/NJwER/26/

【讨论】：

position: relative; 在 css 中很关键，花了一段时间才明白这一点！
很好的解决方案 - 简单、易懂且有效。