jQuery的動畫移動元素留下一點都

Question

我對一些類型的遊戲，我可以拖動的元素工作的工作和拖動它們取決於拖動方向移動

左（正或負）。 我已經嘗試過這樣做的萬種方法。 正常的「回覆：真」與水平元素無法正常工作，因爲元素

被還原的位置錯誤。 最後，我用jQuery中的動畫（）函數的工作了局面，它確實有效

不錯，但它只是拖動的元素上下，但左，右方向不

工作。 這是我做的是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'); 
    } 
    ...