I have two sortable linked lists, call them list 1 and list 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.

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.

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.

I have two sortable linked lists, call them list 1 and list 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.

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.

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.

• javascript
• jquery
• jquery-ui-sortable

• Something like this? farhadi.ir/projects/html5sortable Look at the bottom. – user1499731 Commented Aug 23, 2012 at 18:48
• Thanks for the reply. That is what I have at the moment - 2 connected sortable lists. What I want to know is is there any way that I can move an item from one list to the other automatically with animation on an event without the need to actually drag it there? – 365SplendidSuns Commented Aug 23, 2012 at 20:42
• I really don't know. Going to that website, though, the entire code that was made for the draggable list is viewable in a single screen... I'm way too thick to figure out how exactly to force the event to start itself though. Sorry :( – user1499731 Commented Aug 23, 2012 at 21:20

1 Answer 1

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.

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.

The function below was very useful for that:

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

It was provided by Davy8 on this thread: JQuery - animate moving DOM element to new parent?