如何以编程方式在jQuery UI .sortable()中移动元素

时间:2014-05-22 11:56:30

标签: jquery jquery-ui animation draggable

我正在寻找如何使用jQuery UI .sortable(),但没有用户交互。

我有一个可排序的列表,通过拖动元素来工作,但我真正想要的是以编程方式移动元素。将元素从位置5移动到位置2,具有所有漂亮的动画但没有用户交互。

可以使用.sortable()吗?

1 个答案:

答案 0 :(得分:0)

与你尝试做的事情非常接近: here

结果可能是:

HTML

<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
<button>Go</button>

Javascript:

$('ul').sortable();
$('button').click(function() {
var li2 = $('li').eq(2);
var li1 = $('li').eq(1);
    var li0 = $('li').eq(0);

var oldOffset = li2.offset();
li0.after( li2 );
var newOffset = li2.offset();

var temp = li2.clone().appendTo('body')
    .css('position', 'absolute')
    .css('left', oldOffset.left)
    .css('top', oldOffset.top)
    .css('zIndex', 1000);
li2.hide();

temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
   li2.show();
   temp.remove();
});

});

Jsfiddle