拖放 – AngularJS – 如何制作可拖动的树？

发布时间：2020-12-17 09:16:13 所属栏目：安全来源：网络整理

导读：我想创建一个树状结构,用户可以拖放树叶.我有一个起点如下： HTML div ng:controller="controller" ul ui-sortable ng-model="items" ui-options="{connectWith: '.item'}" class="item" li ng-repeat="item in items" class="item" {{ item.name }} ul ui-s

我想创建一个树状结构,用户可以拖放树叶.我有一个起点如下：

HTML

<div ng:controller="controller">
  <ul ui-sortable ng-model="items" ui-options="{connectWith: '.item'}" class="item">
    <li ng-repeat="item in items" class="item">
      {{ item.name }}
      <ul ui-sortable ng-model="item.children" ui-options="{connectWith: '.item'}" class="item">
        <li ng-repeat="item in item.children" class="item">{{ item.name }}</li>
      </ul>
    </li>
  </ul>

  <pre>{{ items | json }}</pre>
</div>

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.min.js"></script>

CoffeeScript的

myapp = angular.module 'myapp',['ui']

myapp.controller 'controller',($scope) ->

    $scope.items = [
      {id: 1,name: 'Item 1',children: [
        {id: 5,name: 'SubItem 1.1',children: [
          {id: 11,name: 'SubItem 1.1.1',children: []},{id: 12,name: 'SubItem 1.1.2',children: []}
        ]},{id: 6,name: 'SubItem 1.2',children: []}
      ]},{id: 2,name: 'Item 2',children: [
        {id: 7,name: 'SubItem 2.1',{id: 8,name: 'SubItem 2.2',children: []}
        {id: 9,name: 'SubItem 2.3',{id: 3,name: 'Item 3',children: [
        {id: 10,name: 'SubItem 3.1',children: []}
      ]}
    ]

angular.bootstrap document,['myapp']

代码也在这个JSFiddle：http://jsfiddle.net/bESrf/1/

在我的“真实”代码中,我提取了第二个< ul>进入一个模板并呈递它递归,哪个工作正常,但我找不到一个方法在JSFiddle中做.

什么是递归呈现它的最佳方式,并且仍然允许拖放以改变由ng模型表示的对象和子对象的数组？

看看这个例子： http://jsfiddle.net/furf/EJGHX/

我刚刚完成了这个解决方案,所以还没有正确的记录,但你应该能够挖掘它的解决方案.

您将需要使用以下几件事情：

> ezTree指令 – 渲染树
> Manuele J Sarfatti’s nestedSortable plugin for jQuery UI
>(可选)uiNestedSortable指令 – 从模板中启用nestedSortable.
>更新模型的控制器代码 – 参考$scope.update

使用ezTree指令

给定递归数据结构：

$scope.data = {
  children: [{
    text: 'I want to create a tree like structure...',children: [{
      text: 'Take a look at this example...',children: []
    }]
  }]
};

该模板将构建树：

<ol>
  <li ez-tree="child in data.children at ol">
    <div>{{item.text}}</div>
    <ol></ol>
  </li>
</ol>

ez-tree表达式应该在选择器中的项目中被写入,其中item是迭代子(ala ng-repeat),collection是根级集合,selector是模板中节点内的CSS选择器,其中的指令应该递归.该集合的终端属性的名称,在这种情况下,孩子将被用来递归树,在这种情况下是child.children.这可以重写为可配置,但我会将其作为读者的练习.

使用uiNestedSortable指令

<ol ui-nested-sortable="{ listType: 'ol',items: 'li',doNotClear: true }"
  ui-nested-sortable-stop="update($event,$ui)">
</ol>

ui-nested-sortable属性应包含nestedSortable插件的JSON配置.该插件需要指定listType和items.我的解决方案要求doNotClear是真的.使用ui-nested-sortable- * eventName *为事件分配回调.我的指令为回调提供了可选的$event和$ui参数.有关其他选项,请参阅nestedSortable的文档.

更新你的模型

有一种方法来皮肤这只猫.这是我的在stop事件中,它提取元素范围的子属性以确定哪个对象被移动,元素的父作用域的子属性来确定对象的目的地,以及确定对象位置的元素的位置在其目的地.然后它移动数据结构,并将对象从其原始位置移除并将其插入其新位置.

$scope.update = function (event,ui) {

  var root = event.target,item = ui.item,parent = item.parent(),target = (parent[0] === root) ? $scope.data : parent.scope().child,child = item.scope().child,index = item.index();

  target.children || (target.children = []);

  function walk(target,child) {
    var children = target.children,i;
    if (children) {
      i = children.length;
      while (i--) {
        if (children[i] === child) {
          return children.splice(i,1);
        } else {
          walk(children[i],child)
        }
      }
    }
  }
  walk($scope.data,child);

  target.children.splice(index,child);
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!