AngularJS |如何包含拖放列表？答案

【问题标题】：AngularJS | How to include drag and drop list?AngularJS |如何包含拖放列表？
【发布时间】：2015-06-21 16:45:52
【问题描述】：

如何包括拖放到我的列表？

文件：list.tpl.html

<div class="panel-body">
<table class="table table-striped">
  <thead>
  <tr>
    <th>Lp.</th>
    <th>Nazwa</th>
    <th>Estymacja</th>
    <th>Data</th>
    <th>Ico</th>
    <th>Zaznacz jako wykonane</th>
  </tr>
  </thead>
  <tr data-ng-repeat="todo in todos">
    <td>{{$index+1}}. </td>
    <td><span class="done-{{todo.done}}">{{todo.title}}</span></td>
    <td><span class="done-{{todo.done}}">({{todo.estimates}}h)</span></td>
    <td><span class="done-{{todo.done}}">{{todo.date}}</span></td>
    <td><span class="glyphicon glyphicon-{{todo.type.gico}} done-{{todo.done}}"></span></td>
    <td><input type="checkbox" data-ng-model="todo.done" title="Mark Complete" /></td>
  </tr>
</table>

文件：list-ctrl.js

app.controller('listCtrl', function ($scope) { 
 $scope.deleteCompleted = function () {
    $scope.$parent.todos = $scope.$parent.todos.filter(function (item) {
      return !item.done;
    });
  };
});

我正在学习 AngularJS，谢谢你的帮助！

【问题讨论】：

据我了解，您需要使用某种插件，并且不直接支持拖放。看起来“angular-dragdrop.js”就是其中之一。

标签： javascript angularjs drag-and-drop

【解决方案1】：

我通常不喜欢在我的代码中添加插件，但在这种情况下，您可以添加一个简单的拖放模块。我用 ui-sortable

那么你只需要做

    <ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

这是一个列表...我猜应该不会有什么不同

还请查看此解决方案： solution

【讨论】：