开发者

jquery ui draggable deaccelerate on stop

开发者 https://www.devze.com 2023-03-17 15:31 出处:网络
i am using 开发者_开发百科jquery ui draggable do drag a div around. whats the best way to smoothly ease out the drag after the drag stopped?

i am using 开发者_开发百科jquery ui draggable do drag a div around. whats the best way to smoothly ease out the drag after the drag stopped? assuming the drag stopped abruptly.

thank you


Implementing draggables with easing might work for you. This is a simplified solution from my answer to a previous thread, which was more specific:

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 demo: http://jsfiddle.net/NJwER/26/

0

精彩评论

暂无评论...
验证码 换一张
取 消