形勢的基本例如：角NG-排序 - 它是如何工作
好傢伙！在我的應用程序中，我有一種看板：有一些列，每列都包含一列項目。
我需要拖放列之間的項目，並重新排列在同一列內。
予之前用拖放（前兩個）和重排序（第三）相關的三個角速度模塊曾嘗試：
ngDraggable：https://github.com/fatlinesofcode/ngDraggable
角的DragDrop：https://github.com/codef0rmer/angular-dragdrop
Angular UI排序：https://github.com/angular-ui/ui-sortable
他們很好，有很好的文檔，但似乎不可能同時拖放和重新排序。 後來我發現另一個模塊：
NG-排序：https://github.com/a5hik/ng-sortable
這似乎正是我需要的。 但文件不是很清楚。我無法理解如何設置它。
問題：
你能告訴我請如何設置？ 有一個好的和明確的例子的蹲點？
謝謝！
如果我們知道您的意思是「設置」（無論您是將它添加到項目中，還是如何使用它），這將有所幫助。如果我們知道您正在安裝的是什麼堆棧（如果有的話），這也會有所幫助。
要安裝
安裝說明在其Git頁面的「Usage」部分下。
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頁面。
最小的ng-sortable安裝（不需要涼亭，Bower也像我一樣對semis感到困惑）。
這是使用ng-sortable得到完全可排序數組的最小設置，對我來說很有用。
加載必要的Javascript
負載angular.js
負載NG-sortable.js（在 發現這DIST文件夾下載的.zip文件https://github.com/a5hik/ng-sortable ）
裝入as.sortable到您的應用程序 var app = angular.module('app', ['ngRoute', 'as.sortable']);
裝入AppController.js
加載必要的樣式表
（Find b OTH在蒸餾水文件夾中下載的.zip文件https://github.com/a5hik/ng-sortable）
負載ng-sortable.style。CSS
必要創建UL屬性（data-as-sortable data-ng-model="sortableList"）
與data-as-sortable-item-handle添加data-as-sortable-item到李
插入Div到李
<!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"
}
];
}
]);
我剛剛上傳這真棒圖書館的一個簡單的例子。我有兩個並排的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>
請儘量避免僅使用鏈接回答。儘管鏈接通常可以成爲很好的答案的一部分，但您應該在帖子中包含所有相關信息。 –
是否可以省略NG重複，只是有排序的獨特元素的x個？ – Marcus
@Marcus是的，你可以手動輸出ng-repeat在做什麼，或者更好的是，繼續使用ng-repeat並且只傳入一個只包含你想要排序的項目的數組。 –