Question

I would like to move my draggable a certain ratio according to how far the mouse has moved.

For example, if the scale is 1:2 and the mouse is moved 10px to the right then the draggable would move 20px.

I have my draggable set up to scroll horizontally within a DIV and snapping to a grid.

Is this maybe in the docs and somehow I missed it? How can I achieve this?

Answer 1

There’s no off-the-shelf option for this. You’d need to bind to the drag event and do something smart with it, like update the elements position based on the mouse’s original position and current position.

However, it’s not all that difficult to do. Here’s a simple sample and a jsfiddle:

$("#draggable").draggable({
    drag: function(event, ui) {
        ui.position.top = (ui.position.top - ui.originalPosition.top) / 2;
        ui.position.left = (ui.position.left - ui.originalPosition.left) / 2;
    }
});