Jquery animate top left dynamic

Question

Я использую jquery для анимации с перетаскиванием html5, и я хотел сделать ту же анимацию, что и для Google.

мне удается сделать:

element.bind('drag', function(e) { 
     _.each(draggedFiles, function(id) { //draggedFiles is an array of id 
     id = 'fs-row-' + id; 
     var newRow = angular.element('body').find('div#'+ id); // Element being animated 

     newRow.animate({ 
      width: 190, 
      height: 50, 
      top: e.originalEvent.pageY, 
      left: e.originalEvent.pageX, 
     }, 'medium', function() { 
      // When the animation is over the tag element are being removed from the DOM 
      _.each(draggedFiles, function(id) { 
      id = 'fs-row-' + id; 
      angular.element('body').find('div#'+ id).remove(); 
      }); 
     }); 
     }); 
    }); 

Анимация работает отлично и перейти к позиции курсора мыши. Но если я перемещаю мышь во время анимации, анимат не будет обновлять верхнюю и левую кнопки «на лету», а вместо этого просто продолжит движение туда, где я щелкнул, вместо того, чтобы следовать за мышью.

Событие перетаскивания позволяет мне узнать положение мыши в окне. Можно ли снова активировать анимацию, пока она не достигнет положения мыши?

[edit] Я смотрю на документ jQuery и обнаружил, что могу использовать прогресс или шаг, но не могу найти, может ли его обновить верхний и левый из этих двух событий. Кто-нибудь знает?

Answer 1

Я нашел свой ответ, глядя на документ jQuery, используя функцию шага, возможно, это поможет кому-то в будущем. В основном вы можете редактировать на каждом шаге конец или начало каждого анимированного свойства. Мне просто нужно было обновить конец мышью.

var y = 0; 
    var x = 0; 
    element.bind('drag', function(e) { 
     _.each(draggedFiles, function(id) { 
     id = 'fs-row-' + id; 
     var newRow = angular.element('body').find('div#'+ id); 

     newRow.animate({ 
      opacity: 1, 
      width: 190, 
      height: 50, 
      top: e.originalEvent.pageY, 
      left: e.originalEvent.pageX 
     }, { 
      duration: 400, 
      step: function(now, tween) { 
      if (tween.prop === 'top') { 
       tween.end = y; 
      } 
      if (tween.prop === 'left') { 
       tween.end = x; 
      } 
      }, 
      complete: function() { 
      newRow.remove(); 
      angular.element(dragElement).animate({ 
       width: 190, 
       height: 50, 
       opacity: 1 
      }, 'fast'); 
      } 
     }); 
     }); 

     y = e.originalEvent.pageY + 1; 
     x = e.originalEvent.pageX; 
    });