끌어서 놓기 정렬 가능한 ng:AngularJs에서 반복하시겠습니까?

끌어서 놓기 정렬 가능한 ng:AngularJs에서 반복하시겠습니까?

AngularJS의 요소에서 사용하기 쉬운가요?

---

아이템의 순서를 바꾸면, 자동적으로 그 순서가 소스 어레이로 되돌려져 버리면, 매우 편리합니다.하지만 두 시스템이 싸울까 두렵습니다.더 좋은 방법이 있을까요?

Angular UI에는 정렬 가능한 지시어가 있습니다.데모를 보려면 여기를 클릭하십시오.

코드는 ui-sortable, 사용방법:

<ul ui-sortable ng-model="items" ui-sortable-update="sorted">
  <li ng-repeat="item in items track by $index" id="{{$index}}">{{ item }}</li>
</ul>

$scope.sorted = (event, ui) => { console.log(ui.item[0].getAttribute('id')) }

저도 같은 방법으로 다음과 같은 해결책을 생각해 냈습니다.

angular.directive("my:sortable", function(expression, compiledElement){
    return function(linkElement){
        var scope = this;
        linkElement.sortable(
        {
            placeholder: "ui-state-highlight",
            opacity: 0.8,
            update: function(event, ui) {
                var model = scope.$tryEval(expression);
                var newModel = [];
                var items = [];
                linkElement.children().each(function() {
                    var item = $(this);
                    // get old item index
                    var oldIndex = item.attr("ng:repeat-index");
                    if(oldIndex) {
                        // new model in new order
                        newModel.push(model[oldIndex]);
                        // items in original order
                        items[oldIndex] = item;
                        // and remove
                        item.detach();
                    }
                });
                // restore original dom order, so angular does not get confused
                linkElement.append.apply(linkElement,items);

                // clear old list
                model.length = 0;
                // add elements in new order
                model.push.apply(model, newModel);

                // presto
                scope.$eval();

                // Notify event handler
                var onSortExpression = linkElement.attr("my:onsort");
                if(onSortExpression) {
                    scope.$tryEval(onSortExpression, linkElement);
                }
            }
        });
    };
});

다음과 같이 사용:

<ol id="todoList" my:sortable="todos" my:onsort="onSort()">

꽤 효과가 있는 것 같아요.모델을 업데이트하기 전에 정렬 가능한 DOM 조작을 실행 취소하면 각도가 DOM에서 동기화되지 않습니다.

변경 통지는 컨트롤러 메서드를 호출할 수 있는 my:onsort 식을 통해 작동합니다.

angular to do 튜토리얼을 기반으로 JsFiddle을 만들었습니다.http://jsfiddle.net/M8YnR/180/

각도 v0.10.6에서는 이렇게 하고 있습니다.여기 jsfiddle이 있습니다.

angular.directive("my:sortable", function(expression, compiledElement){
    // add my:sortable-index to children so we know the index in the model
    compiledElement.children().attr("my:sortable-index","{{$index}}");

    return function(linkElement){
        var scope = this;            

        linkElement.sortable({
            placeholder: "placeholder",
            opacity: 0.8,
            axis: "y",
            update: function(event, ui) {
                // get model
                var model = scope.$apply(expression);
                // remember its length
                var modelLength = model.length;
                // rember html nodes
                var items = [];

                // loop through items in new order
                linkElement.children().each(function(index) {
                    var item = $(this);

                    // get old item index
                    var oldIndex = parseInt(item.attr("my:sortable-index"), 10);

                    // add item to the end of model
                    model.push(model[oldIndex]);

                    if(item.attr("my:sortable-index")) {
                        // items in original order to restore dom
                        items[oldIndex] = item;
                        // and remove item from dom
                        item.detach();
                    }
                });

                model.splice(0, modelLength);

                // restore original dom order, so angular does not get confused
                linkElement.append.apply(linkElement,items);

                // notify angular of the change
                scope.$digest();
            }
        });
    };
});

jquery.ui를 사용하지 않고 정렬 가능한 Angular.js 디렉티브를 구현합니다.

• https://github.com/schartier/angular-sortable

가볍고 jquery를 사용하지 않는 ng-signable 디렉티브를 선택할 수 있습니다.링크 ng 설정 가능한 드래그 앤 드롭 요소를 나타냅니다.

ng-sortable 데모

언급URL : https://stackoverflow.com/questions/7354992/drag-and-drop-sortable-ngrepeats-in-angularjs