ngDraggable -앵글러 모듈을 활용한 드래그앤 드랍 순서 정렬

그간 밀려드는 프로젝트를 처리하느라 포스팅에 소흘했습니다... :ㅇ

오랫만에 포스팅을 해봅니다.!

오늘 소개해 드릴 모듈은 Angular 에서 Draggable 한 Ordering 을 구현하는 모듈 입니다.

설치 방법과 사용방법은 무척이나 간단합니다.

bower install ngDraggable

설치후 실행될 컨트롤러가 있는 index.html(기본) 안에 ngDraggable.js 스크립트 파일을 추가시켜줘야 합니다.

이때 Angular.js 가 먼저 로드 되어야 하기때문에

Angular.js 보다 아래 라인에 스크립트 파일을 추가합니다.

<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/ngDraggable/ngDraggable.js" ></script>

그리고  , 의존성을 추가 해줘야 합니다.

var app = angular.module('eventApp', [
    'ngRoute',
    'angularFileUpload',
    'ui.bootstrap',
    'ngCookies',
    'youtube-embed',
    'duScroll',
    'ngDraggable'
]);

배열로 선언된 하단부에 ngDraggable 를 추가 합니다.

HTML 에서 Angular 로 리스트를 불러온 모습입니다.

<div ng-repeat="brand_list in brand_list" ng-class="brand_logo_type" 
     ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" ng-drag="true" ng-drag-data="brand_list">

모듈을 직접 사용해볼탠데요.

ng-drop : 드롭을 사용할지 여부

ng-drop-success : 드롭 성공시 실행할 액션

ng-drag : 드래그를 사용할지 여부

ng-drag-data : 드래그 이벤트 발생시 기준이되는 데이터리스트가 담겨져 있는 스코프.

컨트롤러 단에 함수는 다음과 같은 로직으로 구현되어 있습니다.

$scope.onDropComplete = function (index, obj, evt) {
    var otherObj = $scope.brand_list[index];
    var otherIndex = $scope.brand_list.indexOf(obj);
    $scope.brand_list[index] = obj;
    $scope.brand_list[otherIndex] = otherObj;
}

이제 작동이 잘되는지 확인해보겠습니다. 1과 6에 위치를 드레그앤 드랍으로 변경해보겠습니다.

드래그앤드랍1

드래그!!

앤~ 드랍!

구현이 잘되었습니다.

드래드 앤 드랍기능은 다양한곳에서 활용이 가능한 만큼 알아두면 좋은 기능인것 같습니다.~

참조 : http://ngmodules.org/modules/ngDraggable