jQuery動畫移動元素完全不起作用

Question

我正在開發一種可以拖動元素的游戲，在拖動時它們必須移動

向左（加號或減號），具體取決於拖動方向。 我已經嘗試了百萬種方法。 正常的'revert：true'在水平元素上無法正常使用，因為該元素

恢復到錯誤的位置。 最后，我使用Jquery中的animate（）函數解決了這個問題，並且確實有效

很好，但是它只能上下拖動元素，但是左右方向卻不行

工作。 這是我這樣做的js腳本：

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

                });

            });
        }
    });
}

希望您能提供幫助。 提前致謝 ：）

Answer 1

在同一功能中使用頂部和左側

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

Answer 2

試試看：

    ...
    create: function(){
        var $this = $(this);
        $this.data({
            'top': $this.position().top,
            'left': $this.position().left
        });
    },
    stop: function(){
        var $this = $(this);
        $this.stop().animate({
            top: $this.data('top'),
            left: $this.data('left')
        },200,'easeOutElastic');
    },
    drag: function(event, ui){
        $(this).stop().animate({
            top: ui.helper.position().top,
            left: ui.helper.position().left
        },0,'easeOutElastic');
    }
    ...