title: Drag and drop event in Angular
body: <pre><code>angular.module('myApp').directive('dragDrop',  function() {
          return {
  
             link:function(scope,element){
  
                element.on('dragover', function(event) { 
                      event.preventDefault();
                });
                element.on('drop', function(event) { 
                      event.preventDefault();
                      var data=event.originalEvent.dataTransfer.getData("Text");                          
           event.target.parentNode.appendChild(document.getElementById(data));
                });
                element.on('drag', function(event) { 
                    event.originalEvent.dataTransfer.setData("Text",event.target.id);
                    console.log(event.originalEvent.dataTransfer.getData("Text"));
                    scope.$apply();
                });
             }
  
          };
      });
  </code></pre>
  
  <p>The above code works very well when I adjust it as not using AngularJS. When I create the above directive for some totally unexplained reason 
  <code>console.log(event.originalEvent.dataTransfer.getData("Text"));</code> <strong>outputs nothing</strong>. <strong><em>Why that</em></strong>? 
  I also present the HTML code (drag and drop functionality between two lists):</p>
  
  <pre><code>&lt;div class="col-xs-6" drag-drop&gt;
                                              &lt;div class="header"&gt;Available Life Events&lt;/div&gt;
                                              &lt;ul class="permission-levels"&gt;
                                                  &lt;li style="margin:20px;" ng-attr-id="{{'ALE'+$index}}" draggable="true"                  
                                                  ng-repeat="event in Events track by $index"&gt;
                                                      {{event.name}}
                                                  &lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/div&gt;
  
  
  &lt;div class="col-xs-6" drag-drop&gt;
                                              &lt;div class="header"&gt;Life Events Applied&lt;/div&gt;
                                              &lt;ul class="permission-levels"&gt;
                                                  &lt;li style="margin:20px;" ng-attr-id="{{'LEA'+$index}}" draggable="true"  
                                                  ng-repeat="event in events track by $index"&gt;
                                                      {{event.name}}
                                                  &lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/div&gt;
  </code></pre>