AngularJS에서 Drag and Drop 드래그하여 요소를 이동하는 방법은?

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