以编程方式移动可拖动位置 [英] Move draggable to position programmatically

问题描述

可以说有一个可拖动对象，只能在一个轴上拖动.

是否可以通过编程方式移动它?可以开始，也可以通过三角洲.当然，我可以更改其css left属性，但这不会触发jQuery提供的拖动事件.

我希望为可拖动对象找到一个dragBy(x,y)方法.

以下是示例: 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;
}

在x轴上移动可拖动元素(此处为theDiv)后，是否可以将其移动一个增量或到初始位置?

解决方案

演示

使用额外的javascript资源，您可以实现所需的内容.

通过jQuery UI:
jquery.simulate.js

来自第三方:
来源: http://j-ulrich.github.io/jquery-simulate-ext/
jquery.simulate.ext.js
jquery.simulate.drag-n-drop .js

支持j-ulrich使其变得如此简单.

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

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?

解决方案

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

这篇关于以编程方式移动可拖动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！