在NG-Click上将一个div移动到AngularJS中的另一个div

Question

我正在尝试在单击按钮后将一个div移动到另一个div。

我知道这在JQuery中是如何工作的，但是你有什么办法可以在angularJS中执行它吗？我正在使用angularJS进行网上商店应用，但实际上从未对角度动画做过任何事情。添加产品后，会有一个移动div到另一个div，因此您知道您已将产品添加到购物车中。

这是一张展示我的意思的图片：

我只是想将div1移动到div2。这是什么最佳做法？任何帮助表示赞赏。因为额外的div1可以在动画后隐藏并在之前的位置重置。

Answer 1

这是stab。它显示了您可以根据需要调整它的基本概念。

想法是你只计算偏移量，然后使用ng-style和ng-class转换它。你需要通过设置calculatePosition变量来实现moveMe。我使用jquery因为我懒惰。

function moveMe(target){
        //do caclculation here:
  var clickMe =  $('.clickMe');
  var target = $('.targetMe');
  var left = target.offset().left - clickMe.offset().left;
  var top = target.offset().top - clickMe.offset().top;
    $scope.calculatePosition = {
     transform: 'translate(' + left + 'px,' + top + 'px)'
  }
  $scope.top = top;
  $scope.left = left;
  $scope.animate = true;
}

模板：

<div class='container'>
  <div class='button clickMe' ng-style="calculatePosition" ng-class="{animate: animate}" ng-click="moveMe()">
    Div 1
  </div>

  <div class='button targetMe'>
    Div 2
  </div>
</div>