AngularJS에서 드래그앤드랍(Drag and Drop) 즉, 드래그하여 요소를 이동하는 방법은 어떻게 될까요?


# 드래그앤 드랍 AngularJS에서 구현하는 방법 알아보기
먼저 드래그앤 드랍을 구현하기 위하여 커스텀 디렉티브(Custom Directive)를 사용합니다.

그리고 반드시 필요한 드래그 이벤트는 아래 3가지입니다. 그 외의 이벤트는 필수는 아니며 선택적입니다.

i. dragstart : 드래그가 가능하도록 변경
ii. dragover : 드래그한 요소가 엘리먼트에 위치할 경우 발생
iii. drop : 드래그가 실제 발생하였을때 이벤트


# Drag and Drop 코드보기

Html 및 CSS 코드입니다.
<div class="wrap-div">
<ul>
<li draggable="true" drag-item id="1">item 01</li>
<li draggable="true" drag-item id="2">item 02</li>
<li draggable="true" drag-item id="3">item 03</li>
</ul>
</div>

<div class="dragHere" drop-item>
Drag here !
</div>

아래는 스크립트 코드입니다.
 
<script>
var app = angular.module('app', []);
app.directive('dragItem', function() {
return {
restrict: 'A',
link: function(scope, elem, attr, controller) {
// Add drag event
elem.bind('dragstart', function(evt) {
var id = elem.attr('id');
evt.dataTransfer.setData('text', id);
});
}
}
});

app.directive('dropItem', function() {
return {
restrict: 'A',
link: function(scope, elem, attr, controller) {
// Drag over event
elem.bind('dragover', function(evt) {
if (evt.preventDefault) {
evt.preventDefault(); // Necessary. Allows us to drop.
}
if(evt.stopPropagation) {
evt.stopPropagation();
}

evt.dataTransfer.dropEffect = 'move';
return false;
});


// Drop item
elem.bind('drop', function(evt) {
evt.preventDefault();

var data = evt.dataTransfer.getData('text');
elem[0].appendChild(document.getElementById(data));
});
}
}
});

app.controller('testController', function() {
var self = this;
self.title = 'Drag and Drop';


});
</script>

위 아이템을 드래그 하여 아래에  놓으면 선택한 아이템이 추가되는 간단한 예제입니다. 여기서는 드래그를 위하여 두 개의 디렉티브를 추가하였습니다.

하나는 드래그 할 수 있는 요소에 추가하는 dragItem 디렉티브이고 다른 하나는 드래그한 요소를 위치하기 위한 dropItem입니다.

​​​​​​​