New dragleave handler

Author: marceljuenemann

angular-drag-and-drop-lists.js

@@ -250,7 +250,7 @@
    *                        by creating a child element with dndPlaceholder class.
    * - dndDragover          Will be added to the list while an element is dragged over the list.
    */
-  dndLists.directive('dndList', ['$parse', '$timeout', function($parse, $timeout) {
+  dndLists.directive('dndList', ['$parse', function($parse) {
     return function(scope, element, attr) {
       // While an element is dragged over the list, this placeholder element is inserted
       // at the location where the element would be inserted after dropping.
@@ -413,20 +413,19 @@
       /**
        * We have to remove the placeholder when the element is no longer dragged over our list. The
        * problem is that the dragleave event is not only fired when the element leaves our list,
-       * but also when it leaves a child element -- so practically it's fired all the time. As a
-       * workaround we wait a few milliseconds and then check if the dndDragover class was added
-       * again. If it is there, dragover must have been called in the meantime, i.e. the element
-       * is still dragging over the list. If you know a better way of doing this, please tell me!
+       * but also when it leaves a child element. Therefore, we determine whether the mouse cursor
+       * is still pointing to an element inside the list or not.
        */
       element.on('dragleave', function(event) {
         event = event.originalEvent || event;
 
-        element.removeClass("dndDragover");
-        $timeout(function() {
-          if (!element.hasClass("dndDragover")) {
-            placeholder.remove();
-          }
-        }, 100);
+        var newTarget = document.elementFromPoint(event.clientX, event.clientY);
+        if (listNode.contains(newTarget) && !event._dndPhShown) {
+          // Signalize to potential parent lists that a placeholder is already shown.
+          event._dndPhShown = true;
+        } else {
+          stopDragover();
+        }
       });
 
       /**

test/dndListSpec.js

@@ -359,26 +359,27 @@ describe('dndList', function() {
       element.remove();
     });
 
-    it('removes the dndDragover class', function() {
-      var rect = element.children()[1].getBoundingClientRect();
-      dragover.dragleave(element);
+    it('removes the placeholder and dndDragover class', function() {
+      var rect = element[0].getBoundingClientRect();
+      dragover.dragleave(element, {clientX: rect.left - 2, clientY: rect.top - 2});
       expect(element.hasClass('dndDragover')).toBe(false);
+      expect(element.children().length).toBe(3);
     });
 
-    it('removes the placeholder after a timeout', inject(function($timeout) {
-      dragover.dragleave(element);
-      $timeout.flush(50);
-      expect(element.children().length).toBe(4);
-      $timeout.flush(50);
+    it('removes the placeholder and dndDragover if child placeholder is already set', function() {
+      var rect = element[0].getBoundingClientRect();
+      dragover.dragleave(element, {clientX: rect.left + 2, clientY: rect.top + 2, phShown: true});
+      expect(element.hasClass('dndDragover')).toBe(false);
       expect(element.children().length).toBe(3);
-    }));
+    });
 
-    it('does not remove the placeholder if dndDragover was set again', inject(function($timeout) {
-      dragover.dragleave(element);
-      element.addClass('dndDragover')
-      $timeout.flush(200);
+    it('sets _dndPhShown if mouse is still inside', function() {
+      var rect = element[0].getBoundingClientRect();
+      var result = dragover.dragleave(element, {clientX: rect.left + 2, clientY: rect.top + 2});
+      expect(element.hasClass('dndDragover')).toBe(true);
       expect(element.children().length).toBe(4);
-    }));
+      expect(result.dndPhShownSet).toBe(true);
+    });
   });
 
   describe('dropEffect', function() {

test/mocks.js

@@ -79,6 +79,8 @@ class DragEventMock {
   get target() { return this.$options.target || undefined; }
   get type() { return this.$type; }
   get _dndHandle() { return this.$options.dndHandle || undefined; }
+  get _dndPhShown() { return this.$options.phShown || undefined; }
+  set _dndPhShown(value) { this.$results.setDndPhShown = value; }
 
   preventDefault() { this.$results.invokedPreventDefault = true; }
   stopPropagation() { this.$results.invokedStopPropagation = true; }
@@ -96,6 +98,7 @@ class DragEventResult {
 
   get propagationStopped() { return !!this.$results.invokedStopPropagation; }
   get defaultPrevented() { return !!this.$results.invokedPreventDefault; }
+  get dndPhShownSet() { return this.$results.setDndPhShown || false; }
   get returnValue() { return this.$results.returnValue; }
   get dropEffect() { return this.$results.dataTransfer.dropEffect; }
   get type() { return this.$type; }