Question

I’m looking for a way to simulate resistance using the jQueryUI draggable plugin (similar to this effect). At the bottom of the draggable documentation it mentions:

“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”.

Geometry not being my strong suit I was looking for help on how to best achieve the effect of resistance when dragging something. I thought that using this tip above, I could change the distance the draggable is moved using a geometric function. I’m not sure if the best term is resistance or elasticity, but I’m looking for the feel as if an element is attached to a point by a rubber band or bungee cord so that the further you drag, the less the object moves.

For example, say I want to drag an object a total distance of 500 pixels (in any direction). I would like the resistance effect to increase the closer to 500 pixels away from the starting point I get. I’ve looked around and haven’t seen anything like this.

Update:

I created a basic jsFiddle that calculates the distance an item has been dragged at http://jsfiddle.net/Z8m4B/

The calculation is:

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

Obviously I would want to change the distance during the drag event and not on stop. Does anyone know how a function to create this resistance or stretch effect?

Answer 1

you can try with this http://jsfiddle.net/sAX4W/ with the drag event you can calculate the distance and get a % from the real distance

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

---

edit

you can try this with both axis 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) {
    }
});​