Ręczna aktualizacja UI-Sortable Items

Question

Zasadniczo chciałbym, aby użytkownicy mogli przeciągać i upuszczać elementy lub klikać w górę/w dół, aby przenieść pozycję na liście.

Czy istnieje dobry sposób na aktualizację indeksów elementów, które są przyjemne w ui-sortable/angular-ui?

Dzięki.

aktualizacja

udało nam się rozwiązać ten problem poprzez dodanie funkcji w naszym kontrolerze, który usunie element z tablicy i dodać go z powrotem w jeden indeks większa lub mniejsza niż w pierwotnym położeniu. Oto przykład niechlujstwa:

$scope.upDown = function(oldIndex, newIndex) { 
    var item = $scope.list[oldIndex]; 
    $scope.list.splice(oldIndex,1); 
    $scope.list.splice(newIndex,0,item); 
}; 

http://jsfiddle.net/69auq/1/

trzeba by dodać sprawdzenie, czy był to pierwszy lub ostatni elem w tablicy wyłączyć górę lub w dół odpowiednio.

Answer 1

udało nam się rozwiązać ten problem, dodając funkcję w naszym kontrolerze, która usuwałaby element z tablicy i dodawała go z powrotem do indeksu większego lub mniejszego niż pierwotna pozycja. Oto przykład niechlujstwa:

$scope.upDown = function(oldIndex, newIndex) { 
    var item = $scope.list[oldIndex]; 
    $scope.list.splice(oldIndex,1); 
    $scope.list.splice(newIndex,0,item); 
}; 

http://jsfiddle.net/69auq/1/

trzeba by dodać sprawdzenie, czy był to pierwszy lub ostatni elem w tablicy wyłączyć górę lub w dół odpowiednio.

Answer 2

Podobnie jak w przypadku wszystkich AngularJS, odpowiedź brzmi: "think in Angular, not jQuery".

This CodePen Dobrze ilustruje, jak to zrobić. Zasadniczo posiadasz tymczasowy obiekt tymczasowy do przeciągania, który następnie przesuwasz do tablicy ograniczonej ng-repeat. Nie mogę wziąć za to zasługi (nie moje dzieło), ale Google doprowadziło mnie do tego dość szybko. CodePen nie używa żadnych zewnętrznych zależności, ale jak widać, oznacza to nieco więcej pracy niż użycie czegoś takiego jak Angular-UI.

Oto a JSFiddle przedstawiający tę samą koncepcję, ale z zależnością od Angular-UI. Zaletą korzystania z kątową-ui jest to, że granica tablica danych musi jedynie być powoływane jako takie:

var myapp = angular.module('myapp', ['ui']); 

myapp.controller('controller', function ($scope) { 
    $scope.list = ["one", "two", "three", "four", "five", "six"]; 
}); 

Oznacza to mniej wysiłku z Twojej strony, ponieważ jest już zorientowali się. AngularJS dobrze sobie radzi z grą jQuery, więc nie powinno to dyktować ogromnej zmiany w podejściu programistycznym z jQuery UI, w zależności od twojego przypadku użycia.