如何使用 jQueryUI 拖动来模拟阻力？

Question

我正在寻找一种使用 jQueryUI 可拖动插件来模拟阻力的方法（类似于 这种效果）。在可拖动文档的底部，它提到：

“要在拖动过程中操纵可拖动对象的位置，您可以 使用包装器作为可拖动的帮助器并定位包装的元素 使用绝对定位，或者您可以像这样更正内部值： $(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 → 无穷大（对于 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 获取代码并将其也放置在这里

Answer 3

var x1=x2=y1=y2=0;
var maxdistance=1000;
var factor=2;
$(function() {
    $("#draggable").draggable({
        helper: function(){
            return $('<div></div>').css('opacity',0);
        },
        start: function(e, ui) {
            y1 = ui.position.top;
            x1 = ui.position.left;
        },
        stop: function(){
            var $this = $(this);
            $this.stop().animate({
                top: $this.data('starttop')
            },1000,'easeOutCirc');
        },
        drag: function(event, ui){
            y2 = ui.position.top;
            x2 = ui.position.left;        
            dist = parseInt(Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2)), 10);
            ydist = (y2-y1);
            xdist = (x2-x1);
            $("#draggable").css("top", (y1+ydist*((maxdistance-ydist)/maxdistance)));
            $("#draggable").css("left", (x1+xdist*((maxdistance-xdist)/maxdistance)));
        }
    });
});​

http://jsfiddle.net/Lf5vc/

Answer 4

有两种方法：
您可以获取元素的左值：

drag: function(event, ui ) {
  distance = $(element).css("left")
}

或者您可以计算它：

start: function( event , ui ) {
    globalX = event.clientX
},

drag: function( event, ui ) {
    distance = Math.abs(event.clientX - globalX);
}