Angular ng-sortable - 工作原理的基本示例答案

【问题标题】：Angular ng-sortable - Basic example of how it worksAngular ng-sortable - 工作原理的基本示例
【发布时间】：2015-03-13 15:37:05
【问题描述】：

情况：

大家好！在我的应用程序中，我有一种看板：有一些列，每列都包含一个项目列表。

我需要在列之间拖放项目并在同一列中重新排序。

我之前尝试过三个与拖放（前两个）和重新排序（第三个）相关的角度模块：

ngDraggable：https://github.com/fatlinesofcode/ngDraggable

角度拖放：https://github.com/codef0rmer/angular-dragdrop

Angular ui-sortable：https://github.com/angular-ui/ui-sortable

它们很好，有很好的文档，但似乎不可能同时拖放和重新排序。然后我找到了另一个模块：

ng-sortable：https://github.com/a5hik/ng-sortable

这似乎正是我所需要的。但是文档不是很清楚。我无法理解如何设置它。

问题：

你能告诉我如何设置吗？有没有一个好而清晰的例子？

谢谢！

【问题讨论】：

标签： javascript angularjs drag-and-drop draggable droppable

【解决方案1】：

最小的 ng-sortable 设置（不需要 bower。对于像我这样的半决赛，Bower 也很混乱。

这是获得具有 ng-sortable 的完整可排序数组的最低设置，对我有用。

加载必要的 Javascripts

加载 angular.js
加载 ng-sortable.js（在 dist 文件夹中找到这个下载的 .zip 文件https://github.com/a5hik/ng-sortable)
加载你的 app.js
将 as.sortable 加载到您的应用中 var app = angular.module('app', ['ngRoute', 'as.sortable']);
加载您的 AppController.js

加载必要的样式表

（在下载的 .zip 文件 https://github.com/a5hik/ng-sortable 的 dist 文件夹中查找两者）

加载 ng-sortable.css
加载 ng-sortable.style.css
用必要的属性创建ul ( data-as-sortable data-ng-model="sortableList")
将data-as-sortable-item 添加到li
将带有data-as-sortable-item-handle的div插入到li

<!DOCTYPE html>
<html>
    <head>
        <title>NG-Sortable</title>
        <script type="text/javascript" src="js/angular/angular.js"></script>
        <script type="text/javascript" src="js/sortable/ng-sortable.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/AppController.js"></script>

        <link rel="stylesheet" type="text/css" href="css/ng-sortable.css">
        <link rel="stylesheet" type="text/css" href="css/ng-sortable.style.css">
    </head>
    <body ng-app="app" ng-controller="AppController">
        <ul data-as-sortable data-ng-model="sortableList">
            <li ng-repeat="item in sortableList" data-as-sortable-item>
                <div data-as-sortable-item-handle>
                    index: {{$index}} | id: {{item.id}} | title: {{item.title}}
                </div>
            </li>
        </ul>
    </body>
</html>

// app.js (Your file)
var app = angular.module('app', ['ngRoute', 'as.sortable']);
// AppController.js (Your file)
app.controller('AppController', [
    '$scope',
    function ( $scope) {


        $scope.sortableList = [
            {
                id : "id-000",
                title : "item 000"
            },
            {
                id : "id-001",
                title : "item 001"
            },
            {
                id : "id-002",
                title : "item 002"
            }

        ];

    }
]);

【讨论】：

很好的例子，但遗憾的是它对我不起作用。我使用 ng-sortable 1.3.2 和 angular 1.5.0 并相信拥有你所描述的一切。
这对我有用，角度 1.5.6 和 ng-sortable 1.3.6。

【解决方案2】：

如果我们知道您所说的“设置”是什么意思（无论您是指实际将其添加到项目中，还是如何使用它），将会有所帮助。如果我们知道您要在哪个堆栈（如果有的话）上安装它，这也会有所帮助。

安装
安装说明位于其 Git 页面的“使用”部分下。

如果您使用的是 yeoman，请运行 bower install ng-sortable 或 bower install ng-sortable -save
将ng-sortable.min.js、ng-sortable.min.css 和ng-sortable.style.min.css 的路径添加到您的项目中，添加这些路径取决于您使用的堆栈。
将ui.sortable 添加为您的应用或模块的依赖项。同样，这取决于您的堆栈。

使用

<ul data-as-sortable data-ng-model="array">
    <li ng-repeat="item in array" data-as-sortable-item>
        <div data-as-sortable-item-handle>
             {{item.data}}
        </div>
    </li>
</ul>

其中“array”是您要排序的项目数组。这将开箱即用，但如果您需要自定义逻辑，请将data-as-sortable 更改为data-as-sortable="CustomLogic" 其中“CustomLogic”是控制器中覆盖默认行为的方法。有关如何添加自定义逻辑的更多详细信息，请查看“回调”和“使用”部分下的 Git 页面。

【讨论】：

是否可以省略 ng-repeat 并简单地将 x 个唯一元素排序？
@Marcus 是的，您可以手动输出 ng-repeat 正在做什么，或者更好的是，继续使用 ng-repeat 并传入一个仅包含您想要排序的项目的数组

【解决方案3】：

我只是上传了这个很棒的库的一个简单示例。我有两个并排的 div，您可以将 div 从一个拖到另一个。我正在使用静态数据。请检查一下。 https://github.com/moytho/DragAndDropAngularJS/tree/master/DragAndDrop 或者你可以在这里查看https://plnkr.co/SRN4u7

<body ng-controller="dragDropController">
<h1>Example</h1>

<div class="container">

<div id="row" class="row">

    <div id="assignedEmployees" class="col-lg-5" style="border: 5px solid red;">
        <div class="card" as-sortable="sortableOptions" data-ng-model="data.projects">
            <div ng-repeat="project in data.projects" as-sortable-item>
                <a title="Add card to column" ng-click="setDate(project)">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
                <div as-sortable-item-handle>{{project.FirstName}}</div>
            </div>
        </div>
    </div>

    <div id="freeEmployees" class="col-lg-5" style="background-color:lightgray;border:5px dashed gray;">
        <div class="card" as-sortable="sortableOptions" data-ng-model="data.employees">
            <div ng-repeat="employee in data.employees" as-sortable-item>
                <div as-sortable-item-handle>{{employee.FirstName}}</div>
            </div>
        </div>
    </div>

</div>     

</div>

【讨论】：

请尽量避免仅使用链接来回答。虽然链接通常可以成为好的答案的一部分，但您应该在帖子中包含所有相关信息。
不知道为什么在这里投反对票 - 问题中要求的如何使用软件包的完美示例。