Jquery UI可排序,自动移动项目 [英] Jquery UI Sortable, move item automatically
问题描述
我有两个可排序的链表,称为列表1和列表2.
I have two sortable linked lists, call them list 1 and list 2.
列表1是用户可以选择的所有可能项目的列表将它们拖入他的购物篮,即列表2.
List 1 is a list of all the possible items that a user may choose and he drags them into his shopping basket which is list 2.
我想要做的是在列表2中的每个项目旁边有一个按钮(或链接)(购物篮)当点击时将项目移回列表1而用户实际上不必将其拖动到那里。
What I would like to do is to have a button(or link) next to each item in list 2(The shopping basket) that when clicked moves the item back into list 1 without the user actually having to drag it there.
我知道我可以通过简单地使用remove来轻松实现这一点( )从列表2中删除项目,然后使用append()或after()等将其添加回列表1但我希望动画可以动画。
I know I can easily achieve this by simply using remove() to remove the item from list 2 and then using append() or after() etc to add it back into list 1 but I would like the movement to be animated.
有没有办法实现这一点,以便项目自动从一个列表拖动到另一个列表?如果是这样的话?
Is there a way that I can achieve this so that the item is automatically "dragged" from one list to the other? and if so how?
我已经好好看看但无济于事,但如果可以的话,该网站会好得多。因此,非常感谢您提供的任何帮助。
谢谢。
I've had a good look around but to no avail, but the site would be much better if I could. Therefore any help you can offer would be greatly appreciated. Thanks.
推荐答案
好的,我想出了答案,所以我想问我应该把问题放到回答这里,以帮助其他需要知道的人。
Ok, I figured out the answer and so thought since I asked the question I should put the answer up here to help anyone else who needs to know.
我有点愚蠢,想通过jquery ui来做这件事,因为我的列表可以排序是无关紧要的,我只需要使用jquery来移动元素并为其设置动画。
I was being a bit stupid looking for a way to do it through jquery ui as the fact my lists were sortable was irrelevant, I just needed to user jquery to move the element and animate it.
下面的函数非常有用:
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元素移动到新的父元素?
It was provided by Davy8 on this thread: JQuery - animate moving DOM element to new parent?
这篇关于Jquery UI可排序,自动移动项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!