如何用jQueryUI draggable模拟阻力？

Question

我正在寻找一种使用jQueryUI draggable插件模拟阻力的方法(类似于此效果).在可拖动文档的底部,它提到:

"要在拖动过程中操纵可拖动的位置,您可以使用包装器作为可拖动的帮助器,并使用绝对定位来定位包裹的元素,或者您可以更正内部值,如下所示:$(this).data('draggable') .offset.click.top - = x".

几何不是我强大的西装我正在寻找帮助,如何在拖动东西时最好地达到阻力的效果.我认为使用上面的这个提示,我可以使用几何函数更改可拖动移动的距离.我不确定最好的术语是阻力还是弹性,但我正在寻找一种感觉,好像一个元素通过橡皮筋或蹦极绳附着在一个点上,这样你拖得越远,物体移动的越少.

例如,假设我想拖动一个对象的总距离为500像素(在任何方向上).我希望阻力效应增加距离我得到的起点更近的500像素.我环顾四周,没见过这样的东西.

更新:

我创建了一个基本的jsFiddle来计算项目被拖动的距离http://jsfiddle.net/Z8m4B/

计算如下:

var x1=x2=y1=y2=0;
$("#draggable").draggable({
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
        y2 = ui.position.top;
        x2 = ui.position.left;        
        dist = parseInt(Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2)), 10);
        console.log(dist);
    }
});

显然我想在拖动事件期间改变距离而不是停止.有谁知道如何创建这种阻力或拉伸效果的功能？

Answer 1

你可以试试这个http://jsfiddle.net/sAX4W/用拖动事件你可以计算距离并从实际距离得到%

var x1 = x2 = y1 = y2 = 0;
$("#draggable").draggable({
    revert: true,
    revertDuration: 100,
    axis: 'y',
    drag: function(e, ui) {
        y2 = ui.position.top;
        x2 = ui.position.left;
        dist = parseInt(Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)), 10);
        ui.position.top = ui.position.top * (1 - (dist / 1000));
    },
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
    }
});?

编辑

你可以试试这两个轴http://jsfiddle.net/2QndJ/

var x1 = x2 = y1 = y2 = 0;
$("#draggable").draggable({
    revert: true,
    revertDuration: 100,

    drag: function(e, ui) {
        y2 = ui.position.top;
        x2 = ui.position.left;
        dist = parseInt(Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)), 10);

        ui.position.top = ui.position.top * (1 - (dist / 1000));
        ui.position.left = ui.position.left * (1 - (dist / 1000));
    },
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
    }
});?

Answer 2

这是一个快速的jsfiddle

基本上,它使用简单的公式1 / (x+1).这是一个渐进的曲线,这意味着y ? 0对x ? infinity(对x >= 0).所以y永远接近零,但永远不会到达那里.

x在这种情况下,鼠标被拖动的距离,y用于缩放拖动矢量.因此,鼠标移动越远,可拖动的移动y越少,越接近零.

因此,如果拖动鼠标只有一点点,那么可拖动的几乎可以跟上.但是你拖得越远,它就会越少.

顺便说一句,它看起来像您链接的示例只是将拖动距离减半.因此,如果将其拖动100像素,则会移动50像素.这是一个更简单的解决方案,但是行为不同,因为它是线性的.我的解决方案是使可拖动的移动指数越小,你(试图)拖动它,这是一种不同的行为.

jQuery的

var halfDist = 150, // the mouse distance at which the mouse has moved
                    // twice as far as the draggable

centerX = 150,      // where to anchor the draggable
centerY = 150;

$("#draggable").draggable({
    drag: function(event, ui) {
        var x, y, dist, ratio, factor;
        x = ui.position.left - centerX;
        y = ui.position.top - centerY;
        dist = Math.sqrt(x*x + y*y);
        ratio = dist / halfDist
        factor = 1 / (ratio + 1);
        x *= factor;
        y *= factor;
        ui.position.left = x + centerX;
        ui.position.top  = y + centerY;
    }
});?

HTML

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

CSS

#arena {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

#draggable {
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top:  -10px;
}

感谢j08691从jsfiddle获取代码并将其放在这里