当前位置：文江博客话题详情

jquery ui 可拖动停止时减速

发布于 2024-11-18 22:33:18 字数 83 浏览 3 评论 0原文

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖不如嘢 2024-11-25 22:33:18

通过缓动实现可拖动对象可能适合您。这是我对上一个线程的回答的简化解决方案，该解决方案更具体：

JQuery 可轻松拖动

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/

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 原文

~没有更多了~