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

Posted 2023-05-08

技术标签:

【中文标题】Angular ng-sortable - 工作原理的基本示例【英文标题】：Angular ng-sortable - Basic example of how it works 【发布时间】：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

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

问题：

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

谢谢！

【问题讨论】：

【参考方案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 页面的“使用”部分下。

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>

【讨论】：

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

以上是关于Angular ng-sortable - 工作原理的基本示例的主要内容，如果未能解决你的问题，请参考以下文章

Angular总结三：组件

Angular Universal 不在路由器插座内呈现内容

mat-autoComplete 中的占位符不起作用，如 Angular Material Documentation 中所示

前端资讯Angular 6 前瞻

脏检查

官方：Angular 5 推迟到10月底发布