Jquery Ui Sortable, Move Item Automatically

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

Solution 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:

functionmoveAnimate(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?