Question

我正在制作某种类型的游戏，我可以拖动元素和拖动它们必须移动

左（加或减）取决于拖动方向。我尝试过百万种方法。正常＆＃39; revert：true＆＃39;与水平元素无法正常工作，作为元素

在错误的位置恢复。最后，我使用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');
    }
    ...

Jquery动画移动元素根本不起作用

2 个答案: