Elle Güncelleme Eğik-UI UI-sıralanabilir Öğeler

Question

Esasen, ben kullanıcılar sürüklemek ve bir öğe damla veya listedeki bir öğeyi taşımak için okları yukarı/aşağı tıklayın edebilmek istiyorum.

ui-sıralanabilir/açısal-ui güzel oynadığını öğelerinin endeksleri güncellemek için iyi bir yolu var mı?

Teşekkürler.

güncelleme

biz diziden öğeyi kaldırmak ve orijinal konumuna birden endeksi az ya da geri ekleyin olurdu bizim denetleyicisi bir işlev ekleyerek bunu çözmek başardık. İşte özensiz örnektir:

$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/

buna göre aşağı yukarı devre dışı bırakmak için dizideki ilk veya son elem oldu ya eğer bir çek eklemeniz gerekir.

Answer 1

Bunu denetleyicimizde, öğeyi diziden kaldıracak ve onu bir önceki dizinden daha büyük veya daha küçük olan bir dizine ekleyecek bir işlev ekleyerek çözebildik. İşte özensiz örnektir:

$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/

buna göre aşağı yukarı devre dışı bırakmak için dizideki ilk veya son elem oldu ya eğer bir çek eklemeniz gerekir.

Answer 2

herşey angularjs olduğu gibi, cevap "think in Angular, not jQuery" etmektir.

This CodePen bunu nasıl gösteren iyi bir iş yok. Temel olarak, sürükleme için kapsamlı bir temp nesnesi vardır, daha sonra ng-yinelemenin bağlı dizisine doğru itin. Bunun için kredi alamıyorum (yaratım değil), ancak Google beni oldukça hızlı bir şekilde yönlendirdi. CodePen hiçbir dış bağımlılık kullanmaz, ancak görebildiğiniz gibi, Angular-UI gibi bir şey kullanmaktan biraz daha fazla iş anlamına gelir.

İşte a JSFiddle aynı kavramı gösteren, ancak Açısal UI bağımlılığı beraber. açısal-ui kullanmanın avantajı, ciltlenmiş veri dizisi yalnızca gibi çağrılır gereken şudur: Zaten anladım oldu beri

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

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

Bu, sizin açınızdan daha az iş anlamına gelir. AngularJS jQuery ile güzelce oynamak için iyi bir iş yapar, bu yüzden kullanım durumunuza bağlı olarak jQuery UI'den geliştirme yaklaşımında büyük bir değişiklik yapılmamalıdır.