jquery ui 拖动缓动/惯性 [英] jquery ui drag easing/inertia

问题描述

如何在使用 jquery ui draggable (http://jqueryui.com/demos/draggable/) 拖动元素时启用缓动或惯性?我想重新创建类似于 maps.google.com 的缓动，当您投掷/拖动地图时，它会缓和到位.理想情况下，我想根据您抛出/拖动元素的力来移动元素.你如何实现这个功能?也许 jquery ui draggable 不是必需的，但我希望模拟在 Google 地图上找到的拖动和缓动.

How do you enable easing or inertia when dragging an element using jquery ui draggable (http://jqueryui.com/demos/draggable/)? I'd like to recreate the easing similar to maps.google.com that as you throw/drag the map it eases into place. Ideally, I'd like to move the element move based on the force you throw/drag the element. How do you accomplish this functionality? Maybe jquery ui draggable isn't necessary, but I'm looking to emulate the dragging and easing found on Google Maps.

谢谢！

推荐答案

我使用了一些来自 此处 但将它们与 jQuery UI 集成.您必须实现逻辑来处理推动元素越界(超出父容器边界)的动量动画

I used some ideas from here but integrated them with jQuery UI instead. You'll have to implement logic to handle a momentum animation that pushes the element out-of-bounds (outside it's parent container's boundaries)

结果代码:

$(function() {
    var $d = $("#draggable");

    var x1, x2,
        y1, y2,
        t1, t2;  // Time

    var minDistance = 40; // Minimum px distance object must be dragged to enable momentum.

    var onMouseMove = function(e) {
        var mouseEvents = $d.data("mouseEvents");
        if (e.timeStamp - mouseEvents[mouseEvents.length-1].timeStamp > 40) {
            mouseEvents.push(e);
            if (mouseEvents.length > 2) {
                mouseEvents.shift();
            }
        }
    }

    var onMouseUp = function() {
        $(document).unbind("mousemove mouseup");
    }

    $d.draggable({
        start: function(e, ui) {
            $d.data("mouseEvents", [e]);
            $(document)
                .mousemove(onMouseMove)
                .mouseup(onMouseUp);
        },
        stop: function(e, ui) {
            $d.stop();
            $d.css("text-indent", 100);

            var lastE = $d.data("mouseEvents").shift();

            x1 = lastE.pageX;
            y1 = lastE.pageY;
            t1 = lastE.timeStamp;
            x2 = e.pageX;
            y2 = e.pageY;
            t2 = e.timeStamp;

            // Deltas
            var dX = x2 - x1,
                dY = y2 - y1,
                dMs = Math.max(t2 - t1, 1);

            // Speeds
            var speedX = Math.max(Math.min(dX/dMs, 1), -1),
                speedY = Math.max(Math.min(dY/dMs, 1), -1);

            // Distance moved (Euclidean distance)
            var distance = Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2));

            if (distance > minDistance) {
                // Momentum
                var lastStepTime = new Date();
                $d.animate({ textIndent: 0 }, {
                    duration: Math.max(Math.abs(speedX), Math.abs(speedY)) * 2000,
                    step: function(currentStep){
                        speedX *= (currentStep / 100);
                        speedY *= (currentStep / 100);

                        var now = new Date();
                        var stepDuration = now.getTime() - lastStepTime.getTime();

                        lastStepTime = now;

                        var position = $d.position();

                        var newLeft = (position.left + (speedX * stepDuration / 4)),
                            newTop = (position.top + (speedY * stepDuration / 4));

                        $d.css({
                            left: newLeft+"px",
                            top: newTop+"px"
                        });
                    }
                });
            }
        }
    });
});

试试看

这篇关于jquery ui 拖动缓动/惯性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！