Question

状况：

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

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

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

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

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

问题：

您能告诉我如何设置它吗？有一个带有良好而明确的例子的吸油烟机吗？

谢谢！

Answer 1

最小的ng-sortable设置（不需要凉亭.Bower对我这样的半决赛也很困惑。）

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

加载必要的Javascripts

加载 angular.js
加载 ng-sortable.js （在dist文件夹中找到已下载 .zip 文件this question）
加载 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"
            }

        ];

    }
]);

Answer 2

如果我们知道你的意思，那将会有所帮助。＆＃34;设置它＆＃34; （无论您是将其实际添加到项目中，还是如何使用它）。如果我们知道你正在安装什么堆栈（如果有的话），它也会有所帮助。

安装
安装说明位于＆＃34; Usage＆＃34;他们的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>

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

Answer 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>

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

3 个答案: