Move draggable to position programmatically

Question

Lets say there is a draggable object capable of being dragged only on one axis.

Is there a way to programmatically move it? Either to start, or by a delta. Of course I could go and change its css left property, but that wouldn't trigger the dragging events jQuery offers.

I was expecting to find a dragBy(x,y) method to the draggable.

Here is the example: http://jsfiddle.net/odyodyodys/daHU8/

html:

<div id="theButton">Reset position</div>
<div id="theDiv">Lorem ipsum dolor sit amet</div>

Js:

$("#theDiv").draggable({
    axis: "x",
    cursor: "pointer"
});

Css:

#theDiv {
    display:block;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-top: 80px;
    background-color: green;
}
#theButton {
    border: 1px solid;
    width:80px;
    cursor: pointer;
}

Is there a way to move the draggable element (the theDiv here) by a delta or to the initial position, after moving it across the x axis?

I cannot save it for some reason. Edited the question to include jsfiddle code. Sorry about that. — Odys, Feb 05 '14 at 20:50
Here you go dude, i think this is what you want... http://jsfiddle.net/vwZMZ/2/ — Pedro Estrada, Feb 05 '14 at 21:39
why don't you set this as an answer? it's exactly what I was looking for Thank you — Odys, Feb 05 '14 at 21:46

score 7 · Accepted Answer · answered Feb 05 '14 at 21:51

DEMO

Using extra javascript sources you can achieve what you are looking for.

From jQuery UI:
jquery.simulate.js

From 3rd party:
Source: http://j-ulrich.github.io/jquery-simulate-ext/
jquery.simulate.ext.js
jquery.simulate.drag-n-drop.js

Props to j-ulrich for making it so easy.

function dragTo(x, y) {
    $("#draggable").simulate("drag-n-drop", {dx: x, dy: y, interpolation: { stepWidth: 1, stepDelay: 1}});
}

Move draggable to position programmatically

1 Answers1

Linked