javascript - 使用 jquery/Angular 将元素从一个位置移动到另一个位置

Question

嗯，问题很简单...... 我有一系列用简单的 ng-repeat 编写的电影 div(图像和 desc)... 现在，当我选择其中一个时，我想要执行以下操作(我想是一个位置游戏):

1)我想从数组中取出该元素，并用平滑的动画将其放大到屏幕上的其他位置，而不破坏该数组的顺序。

2)当我选择另一部电影时，我希望我之前选择的那部电影回到原来的位置，跟随我新选择的电影占据之前那部电影的空间:

这是我创建的一个简单的练习页面，以便有人可以进一步挖掘: http://single.org.il/

(只需按上面的类别之一，页面底部就会出现电影列表，中间的黑屏是我希望我选择的电影进入的地方，这一切都已经发生了，但它中断了，很多)

非常感谢!

Answer 1

我建议将选择状态作为数据模型的一部分，然后根据选择数据绑定(bind) View 。要点是:

• 将所选项目作为 $scope 的一部分进行跟踪，将选择状态作为项目数据的一部分进行跟踪
• 从导航列表中过滤出所选项目
• 将详细信息 View 绑定(bind)到所选项目

我创建了一个简单的 jsfiddle 来演示这个概念，http://jsfiddle.net/ZLvQD/1/ 。关键代码点包括过滤后的导航列表:

<div ng-controller="ListController">
  <ul>
    <li ng-repeat="item in itemList | filter:{isSelected:false}" 
      ng-class="{selected: item.isSelected}" ng-click="select(item)">
      {{item.desc}}</li>
  </ul>
  <div ng-hide="!selectedItem">
    <hr/>
    The selected item is:
    <p class="selected">{{selectedItem.desc}}</p>
  </div>

包括选择状态的数据模型:

$scope.itemList = [
    {
        "desc": "Item A",
        "isSelected": false
    },
...

以及 Controller 跟踪选择状态:

$scope.selectedItem = null;
$scope.select = function(selectedItem) {
    // Deselect existing
    if ($scope.selectedItem) {
        $scope.selectedItem.isSelected = false;
    }
    // Select new
    selectedItem.isSelected = true;
    $scope.selectedItem = selectedItem;
};

恐怕我对动画部分一无所知。