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

Question

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

“To manipulate the position of a draggable during drag, you can either use a wrapper as the draggable helper and position the wrapped element with absolute positioning, or you can correct internal values like so: $(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);
    }
});

显然，我想在拖动事件期间而不是在停止时更改距离。有谁知道一个函数是如何产生这种阻力或拉伸(stretch)效果的？

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