Jquery UI可排序,自动移动项目

Question

我有两个可排序的链表,称为列表1和列表2.

列表1是用户可以选择的所有可能项目的列表,并且将它们拖入他的购物篮(列表2)中.

我想要做的是在列表2(购物篮)中的每个项目旁边都有一个按钮(或链接),当点击它时,将项目移回列表1,而用户实际上不必将其拖动到那里.

我知道我可以轻松实现这一点,只需使用remove()从列表2中删除项目,然后使用append()或after()等将其添加回列表1但我希望动画可以动画.

有没有办法实现这一点,以便项目自动从一个列表"拖动"到另一个列表？如果是这样怎么样？

我已经好好看看但无济于事,但如果可以的话,该网站会好得多.因此,非常感谢您提供的任何帮助.谢谢.

Answer 1

好吧,我想出了答案,所以想到了,因为我问了一个问题,我应该把答案放在这里,以帮助其他需要知道的人.

我有点愚蠢地寻找通过jquery ui来实现它的方法因为我的列表是可排序的事实是无关紧要的,我只需要使用jquery来移动元素并为其设置动画.

以下功能非常有用:

function moveAnimate(element, newParent){
    var oldOffset = element.offset();
    element.appendTo(newParent);
    var newOffset = element.offset();

    var temp = element.clone().appendTo('body');
    temp    .css('position', 'absolute')
            .css('left', oldOffset.left)
            .css('top', oldOffset.top)
            .css('zIndex', 1000);
    element.hide();
    temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
       element.show();
       temp.remove();
    });
}

它是由Davy8在这个线程上提供的: JQuery - 动画将DOM元素移动到新的父元素？