javascript - Move draggable to position programmatically - Stack Overflow

admin管理员组

文章数量:1320612

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: /

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?

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/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?

• javascript
• jquery
• jquery-ui
• jquery-ui-draggable

Share Improve this question Follow edited Feb 5, 2014 at 21:05 Odys asked Feb 5, 2014 at 20:45 OdysOdys 9,1001111 gold badges7575 silver badges116116 bronze badges 7

• 1 am i missing something in the fiddle? – Pedro Estrada Commented Feb 5, 2014 at 20:48
• I cannot save it for some reason. Edited the question to include jsfiddle code. Sorry about that. – Odys Commented Feb 5, 2014 at 20:50
• Fiddle is ok now. Sorry guys – Odys Commented Feb 5, 2014 at 20:51
• no problem, i thought i was going crazy – Pedro Estrada Commented Feb 5, 2014 at 20:51
• 2 Here you go dude, i think this is what you want... jsfiddle/vwZMZ/2 – Pedro Estrada Commented Feb 5, 2014 at 21:39

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptMove draggable to position programmaticallyStack Overflow