Drag and drop event in Angular
<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>