drag hover class update and fix throwing up on memeory leak. Updated test with 1.2.29 angular

Author: ganarajpr

css/styles.css

@@ -41,10 +41,11 @@ body {
     background-color : #aaaaaa;
 }
 
-.on-drag-hover:before {
-  content: 'Drop him gently';
-  display: block;
-  color: white;
-  font-size: x-large;
-  font-weight: 800;
+
+.on-drag-enter{
+    background-color : #aaaaaa;
+}
+
+.bg-info{
+    background-color : #aaaaaa;
 }

draganddrop.js

@@ -123,6 +123,7 @@ angular.module("ngDragDrop",[])
                   dragging--;
                   if (dragging == 0) {
                     element.removeClass(dragHoverClass);
+                    element.removeClass(dragEnterClass);
                   }
                 }
 
@@ -158,7 +159,7 @@ angular.module("ngDragDrop",[])
                     return channelMatchPattern.test("," + dropChannel + ",");
                 }
 
-                $rootScope.$on("ANGULAR_DRAG_START", function (event, channel) {
+                var deregisterDragStart = $rootScope.$on("ANGULAR_DRAG_START", function (event, channel) {
                     dragChannel = channel;
                     if (isDragChannelAccepted(channel, dropChannel)) {
 
@@ -173,7 +174,7 @@ angular.module("ngDragDrop",[])
 
 
 
-                $rootScope.$on("ANGULAR_DRAG_END", function (e, channel) {
+                var deregisterDragEnd = $rootScope.$on("ANGULAR_DRAG_END", function (e, channel) {
                     dragChannel = "";
                     if (isDragChannelAccepted(channel, dropChannel)) {
 
@@ -188,17 +189,17 @@ angular.module("ngDragDrop",[])
                 });
 
 
-                $rootScope.$on("ANGULAR_HOVER", function (e, channel) {
+                var deregisterDragHover = $rootScope.$on("ANGULAR_HOVER", function (e, channel) {
                     if (isDragChannelAccepted(channel, dropChannel)) {
                       element.removeClass(dragHoverClass);
                     }
                 });
 
 
                 scope.$on('$destroy', function () {
-                    $rootScope.$$listeners.ANGULAR_DRAG_END = [];
-                    $rootScope.$$listeners.ANGULAR_DRAG_START = [];
-                    $rootScope.$$listeners.ANGULAR_DRAG_HOVER = [];
+                    deregisterDragStart();
+                    deregisterDragEnd();
+                    deregisterDragHover();
                 });
 
 

test.html

@@ -6,7 +6,7 @@
     <title>AngularJS Plunker</title>
     <script>document.write('<base href="' + document.location + '" />');</script>
     <link rel="stylesheet" href="css/styles.css" />
-    <script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
+    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js" data-semver="1.2.20"></script>
     <script src="http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"></script>
     <script src="js/app.js"></script>
     <script src="draganddrop.js"></script>
@@ -21,9 +21,16 @@ <h4 class="heading">
             </h4>
         </div>
 
+        <h3>Beasts</h3>
+        
+        <p>Left column of beasts is not draggable and accepts both beasts and priests</p>
+        
+        <hr>
+        
         <div class="row" ng-controller="MainCtrl">
             <div class="col-xs-6">
-                <ul ui-on-Drop="onDrop($event,$data,men)" drop-channel="beasts,priests">
+                <ul ui-on-Drop="onDrop($event,$data,men)" drag-enter-class="bg-info"
+                  drop-channel="beasts,priests">
                     <li ui-draggable="false" drag="man" drag-channel="beasts"
 
                     on-drop-success="dropSuccessHandler($event,$index,men)"
@@ -43,6 +50,12 @@ <h4 class="heading">
             </div>
         </div>
 
+        <hr>
+        
+        <h3>Priests</h3>
+        
+        <hr>
+        
         <div class="row" ng-controller="MainCtrl">
             <div class="col-xs-6">
                 <ul ui-on-Drop="onDrop($event,$data,men)" drop-channel="priests">
@@ -63,6 +76,41 @@ <h4 class="heading">
                 </ul>
             </div>
         </div>
+        
+        <hr>
+        
+        <h3>Terrorists</h3>
+        
+        <p>Each terrorist list item accepts a new terrorist. Shows inserting into a particular
+        position in an array.</p>
+        
+        <hr>
+        
+        
+        <div class="row" ng-controller="MainCtrl">
+            <div class="col-xs-6">
+                <ul>
+                    <li ui-draggable="true" drag="man" drag-channel="terrorists2"
+                    drag-hover-class="bg-info"
+                    on-drop-success="dropSuccessHandler($event,$index,men)"
+                    ui-on-Drop="onDrop($event,$data,men)" drop-channel="terrorists1"
+                    ng-repeat="man in men track by $index">
+                        {{man}}
+                    </li>
+                </ul>
+            </div>
+            <div class="col-xs-6">
+                <ul>
+                    <li ui-draggable="true" drag="woman" drag-channel="terrorists1"
+                    drag-hover-class="bg-info"
+                    ui-on-Drop="onDrop($event,$data,women)" drop-channel="terrorists2"
+                    on-drop-success="dropSuccessHandler($event,$index,women)"
+                    ng-repeat="woman in women track by $index">
+                        {{woman}}
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
   </body>