Jquery UI Sortable，自动移动项目

Question

我有两个可排序的链表，称之为列表1和列表2。

列表1是用户可以选择的所有可能项目的列表，他将它们拖入他的购物篮子——列表2。

我想要做的是，在列表2（购物篮）中的每个项目旁边放置一个按钮（或链接），当单击该按钮时，将该项目移回到列表1，而不需要用户实际拖动它。

我知道我可以通过简单使用remove()从列表2中删除该项，然后使用append()或after()等将其添加回列表1，但我希望移动过程是动画的。

是否有一种方法可以实现自动将项目从一个列表“拖动”到另一个列表？如果有，如何实现？

我已经仔细查看了，但没有结果，但如果我能找到解决方案，这个站点会更好。因此，非常感谢您提供的任何帮助。 谢谢。

- 365SplendidSuns

---

类似这样的吗？http://farhadi.ir/projects/html5sortable/ 看看底部。 - user1499731

谢谢回复。那是我目前所拥有的 - 两个已连接并可排序的列表。我想知道的是，是否有任何方法可以在事件上自动带有动画地将项目从一个列表移动到另一个列表，而无需实际拖动它到那里？ - 365SplendidSuns

我真的不知道。不过，如果去那个网站，整个可拖动列表的代码可以在一个屏幕上查看... 我太笨了，无法弄清楚如何强制事件自行启动。抱歉 :( - user1499731

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元素至新的父级？

 

- 365SplendidSuns