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

Question

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

“要在拖动过程中操纵可拖动对象的位置，您可以 使用包装器作为可拖动帮助器并定位被包装的元素 使用绝对定位，或者您可以像这样更正内部值： $(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

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 2

Here's a quick 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 获取代码并将其也放在这里

Answer 3

您可以尝试使用此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 4

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

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);
}