角ng.可排序.其工作原理的基本示例
形势：
大家好！在我的应用程序中，我有一种kanban:有一些列，每个列都包含一个项目列表。
我需要在列之间拖放项目，并在同一列中重新排序。
我曾经尝试过三个与拖放(前两个)和重排(第三个)相关的角度模块：
ngDraggable：https://github.com/fatlinesofcode/ngDraggable
角拖曳：https://github.com/codef0rmer/angular-dragdrop
角ui-可排序的：https://github.com/angular-ui/ui-sortable
它们很好，有很好的文档，但似乎不可能同时拖放和重新排序。然后我发现了另一个模块：
ng-sortable：https://github.com/a5hik/ng-sortable
这似乎正是我所需要的。但文件并不那么清楚。我无法理解如何设置它。
问题：
你能告诉我怎么安排吗？有一个有一个很好的例子的柱塞吗？
谢谢!
回答 3
Stack Overflow用户
发布于 2015-08-31 14:23:35
最小ng-可排序设置(不需要保龄球)。对像我这样的半人来说，鲍尔也很困惑。)。。
这是获得一个带有ng排序的完整排序数组的最小设置，它对我有效。
加载必需的Javascripts
- 负载angular.js
- 加载ng-sortable.js (在下载的.zip文件https://github.com/a5hik/ng-sortable中的dist文件夹中找到此文件)
- 加载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
- 使用必要的属性(
data-as-sortable data-ng-model="sortableList")创建ul - 将
data-as-sortable-item添加到li中 - 将div with
data-as-sortable-item-handle插入到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"
}
];
}
]);Stack Overflow用户
发布于 2015-01-21 18:15:04
如果我们知道您所说的“设置它”是什么意思的话(不管您是指将它实际添加到项目中，还是如何使用它)，这将有帮助。如果我们知道您正在安装哪个堆栈(如果有的话)，这也会有所帮助。
安装
安装说明在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>其中“数组”是您正在排序的项的数组。这将开箱即用，但如果需要自定义逻辑，则将data-as-sortable更改为data-as-sortable="CustomLogic"，其中"CustomLogic“是控制器中覆盖默认行为的方法。有关如何添加自定义逻辑的详细信息，请查看“回调”和“使用”部分下的Git页面。
Stack Overflow用户
发布于 2016-04-15 02:05:10
我只是上传了一个很棒的库的简单例子。我有两个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>
https://stackoverflow.com/questions/27960121
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号