如何使用greensock.js使div从一个容器飞到另一个容器？

Question

我正在尝试创建UI，其中点击图块[sub-divs]从一个父div移动到另一个父div。我已经创建了一支笔来解释这个问题。笔工作正常，但现在我需要知道如何向他们展示移动，动画。我希望他们一个接一个地点击。之前我使用过greensock.js，但我不知道在这种情况下如何使用它，或者我可以在这里使用它吗？

var data = [{Id:1,LoginName:"Dave" ,SpaceName : "SpaceName1" , Email:"Dave@test.com" },{Id:2,LoginName:"Mike" ,SpaceName : "SpaceName2" , Email:"Mike@test.com" },{Id:3,LoginName:"Kevin" ,SpaceName : "SpaceName3" , Email:"Kevin@test.com" }]

var AppViewModel = function (){
  var self = this;
  self.EditLoginName = ko.observable();
  self.EditEamil = ko.observable();
  self.SelectedUserId = ko.observable();

  self.Users = ko.observableArray($.map(data, function (user) {
    return new UserViewModel(user);
  }));

  self.EditUser = function(user){
    $(".bs-example-modal-sm").modal('show')
     self.EditLoginName(user.LoginName())
     self.EditEamil(user.Email());
     self.SelectedUserId(user.Id())
  }

  self.UpdateUser = function(){
    alert(self.EditLoginName() + " Id: "+self.SelectedUserId()  + " is ready to get updated");
  }
}

var UserViewModel = function (data){
  var self = this;
  self.Id = ko.observable(data.Id)
  self.LoginName = ko.observable(data.LoginName)
  self.SpaceName = ko.observable(data.SpaceName)
  self.Email = ko.observable(data.Email)
}
ko.applyBindings( new AppViewModel());

$(".mybox").on('click', function() {
  $(this).css('background', 'red');
  $(this).detach();
  $(this).appendTo("#two");

  var p = $("#two");
  var position = p.position();
   TweenLite.to(this, 0.5, {x:position.left, y:position.right});
});

#one {
          width: 200px;
          height: 200px;
          float: left;
          background: rgba(255,40,100,0.5);;
        }
        #two {
          margin-left: 300px;
          width: 200px;
          height: 200px;
          background: rgba(0,240,10,0.5);
        }
        .mybox {
          float:left;
          width: 50px;
          height: 50px;
          background: rgb(255,0,0);
          margin: auto auto;
        }