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

问题描述

如何在使用jquery ui draggable（http://jqueryui.com/demos/draggable/）拖动元素时启用缓动或惰性？我想重新创建类似于maps.google.com的缓动，当您拖/放地图时，它会缓解。理想情况下，我想根据您抛出/拖动元素的力量移动元素移动。你如何完成这个功能？也许jquery ui可拖曳不是必须的，但我希望模拟在Google地图上找到的拖拽和缓存。

谢谢！

解决方案

我使用了这里，而是将它们与jQuery UI集成。你必须实现逻辑来处理势头动画，它将元素推出界外（在它的父容器边界之外）。

结果代码：

  $（function（）{
 var $ d = $（＃draggable）; 
 
 var x1，x2，
 y1，y2，
 t1，t2; //时间
 
 var minDistance = 40; //必须拖动最小px距离对象以启用动量。
 
 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）; 
 
 //加速
 var speedX = Math.max（Math.min（dX / dMs，1），-1），
 speedY = Math.max（Math.min （dY / dMs，1），-1）; 
 
 //距离移动（欧几里德距离）
 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
}）; 
} 
}）; 
} 
} 
}）; 
}）;  

尝试它出

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.

Thanks!

解决方案

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)

The resulting code:

$(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"
                        });
                    }
                });
            }
        }
    });
});

Try it out

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