javascript - 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

在同一个函数中使用top和left

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