Jquery animate move element left not working at all

I am working on some kind of game that I can drag elements and on drag they have to move

left (plus or minus) depending on the drag direction. I've tried like million ways of doing that. The normal 'revert:true' is not working properly with horizontal elements, as the element

is reverted in a wrong position. Finally, I worked it around with the animate() function in Jquery, And it really works

fine but it only drags the elements up and down, But left and right directions are not

working. Here's my js script for doing that :

function setAllMatchesDraggable(){

    $('.matches').not('.answer').draggable({
        // Can't use revert, as we animate the original object
        //revert: true,

        helper: function(){
            // Create an invisible div as the helper. It will move and
            // follow the cursor as usual.
            return $('<div></div>').css('opacity',0);
        },
        create: function(){
            // When the draggable is created, save its starting
            // position into a data attribute, so we know where we
            // need to revert to.
            var $this = $(this);
            if(($this).hasClass("flip_left") || ($this).hasClass("flip_right"))
            {
                $this.data('top',$this.position().top - 29);
                $this.data('left',$this.position().left);

            }else{
                $this.data('top',$this.position().top);
                $this.data('left',$this.position().left);
            }
        },
        stop: function(){
            // When dragging stops, revert the draggable to its
            // original starting position.
            var $this = $(this);
            $this.stop().animate({
                "top": $this.data('top')
            },200,'easeOutElastic',function(){

              $(this).stop().animate({"left":$this.data('left')},200,'easeOutElastic');

            });
        },
        drag: function(event, ui){

            // During dragging, animate the original object to
            // follow the invisible helper with custom easing.
            $(this).stop().animate({
                "top": ui.helper.position().top

            },200,'easeOutElastic',function(){


                     $(this).stop().animate({"left":ui.helper.position().left},200,'easeOutElastic',function(){

                    console.log(ui.helper.position().left);

                });

            });
        }
    });
}

I wish You could help. Thanks in advance :)