情况:
大家好!在我的应用程序中，我有一种看板:有一些列，每个列都包含一个项目列表。
我需要在列之间拖放项目并在同一列内重新排序。
我之前尝试过三个与拖放(前两个)和重新排序(第三个)相关的 Angular 模块:
ngDraggable:https://github.com/fatlinesofcode/ngDraggable
Angular 拖放:https://github.com/codef0rmer/angular-dragdrop
Angular 用户界面可排序:https://github.com/angular-ui/ui-sortable
它们很好，有很好的文档，但似乎无法同时进行拖放和重新排序。 然后我找到了另一个模块:
ng-sortable:https://github.com/a5hik/ng-sortable
这似乎正是我所需要的。 但是文档不是很清楚。我无法理解如何设置它。
问题:
你能告诉我如何设置吗？ 有一个 plunker 有一个好的和清楚的例子吗？
谢谢!
最佳答案
最小的 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 文件中的 dist 文件夹中找到两者 https://github.com/a5hik/ng-sortable )
- 加载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"
}
];
}
]);
关于javascript - Angular ng-sortable - 它如何工作的基本示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27960121/