* More stable handling of nested elements. Instead of keeping track of

dragOverElements in a list, the related target of the event is used to
determine if it is an event that happened on the main element or bubbled
up from child elements.
* Fix a bug in drag emulation that occurred when a nested HTML element
was dragged. Getting the element under the drag image was wrong.

Author: marcojakob

lib/html5_dnd.dart

@@ -28,13 +28,6 @@ Element currentDraggable;
 /// The [DraggableGroup] the [currentDraggable] belongs to.
 DraggableGroup currentDraggableGroup;
 
-/// Keep track of [EventTarget]s where dragEnter or dragLeave has been fired on.
-/// This is necessary as a dragEnter or dragLeave event is not only fired
-/// on the [dropzoneElement] but also on its children. Now, whenever the 
-/// [dragOverElements] is empty we know the dragEnter or dragLeave event
-/// was fired on the real [dropzoneElement] and not on its children.
-Set<EventTarget> currentDragOverElements = new Set<EventTarget>();
-
 /**
  * Abstract superclass for all groups containing drag and drop elements.
  */

lib/html5_sortable.dart

@@ -8,6 +8,7 @@ import 'dart:html';
 import 'dart:async';
 import 'package:meta/meta.dart';
 import 'package:logging/logging.dart';
+
 import 'package:html5_dnd/html5_dnd.dart';
 
 import 'package:html5_dnd/src/css_utils.dart' as css;

lib/src/dnd/draggable.dart

@@ -146,6 +146,8 @@ class DraggableGroup extends Group {
    * Adds the CSS classes and fires dragStart event.
    */
   void _handleDragStart(Element element, Point mousePagePosition, Point mouseClientPosition) {
+    _logger.finest('handleDragStart');
+    
     currentDraggable = element;
     currentDraggableGroup = this;
 
@@ -180,6 +182,8 @@ class DraggableGroup extends Group {
    */
   void _handleDragEnd(Element element, Point mousePagePosition, 
                       Point mouseClientPosition) {
+    _logger.finest('handleDragEnd');
+    
     // Remove CSS classes.
     if (draggingClass != null) {
       element.classes.remove(draggingClass);
@@ -196,7 +200,6 @@ class DraggableGroup extends Group {
     // Reset variables.
     currentDraggable = null;
     currentDraggableGroup = null;
-    currentDragOverElements.clear();
   }
 }
 
@@ -233,6 +236,7 @@ List<StreamSubscription> _installDraggable(Element element, DraggableGroup group
       return;
     }
     _logger.finest('dragStart');
+    
     // In Firefox it is possible to start selection outside of a draggable,
     // then drag entire selection. This leads to strange behavior, so we 
     // deactivate selection here.
@@ -275,12 +279,14 @@ List<StreamSubscription> _installDraggable(Element element, DraggableGroup group
   subs.add(element.onDragEnd.listen((MouseEvent mouseEvent) {
     // Do nothing if no element of this dnd is dragged.
     if (currentDraggable == null) return;
+    
     _logger.finest('dragEnd');
 
     group._handleDragEnd(element, mouseEvent.page, mouseEvent.client);
 
     // Reset variables.
     isHandle = false;
+    _lastDragEnterTarget = null;
   }));
 
   return subs;

lib/src/dnd/draggable_emulated.dart

@@ -77,7 +77,7 @@ List<StreamSubscription> _installEmulatedDraggable(Element element, DraggableGro
         // -------------------
         // Fire Dropzone events (DragEnter, DragOver, DragLeave)
         // -------------------
-        _fireEventsForDropzone(moveEvent);
+        _fireEventsForDropzone(element, moveEvent);
       }
     });
 
@@ -144,20 +144,22 @@ void _emulateDragEnd(Element element, DraggableGroup group) {
       }
     }
 
+    // Restore cursor.
+    _restoreCursor();
+    
     // Reset variables.
-    _emulDragImage = null;
     _emulDragStarted = false;
-    
-    // Reset cursor.
-    _restoreCursor();
+    _emulDragImage = null;
+    _emulPrevMouseTarget = null;
   };
 
   subMouseUp = document.onMouseUp.listen((MouseEvent upEvent) {
     // Fire the drop event.
     EventTarget target = upEvent.target;
-    if (_emulDragImage != null && target == _emulDragImage.element) {
+    if (_emulDragImage != null && 
+        (_emulDragImage.element == target || _emulDragImage.element.contains(target))) {
       // Forward event on the drag image to element underneath.
-      target = _getElementUnder(upEvent);
+      target = _getElementUnder(_emulDragImage.element, upEvent);
     }
     target.dispatchEvent(_createEmulatedMouseEvent(upEvent, EMULATED_DROP));    
 
@@ -178,11 +180,11 @@ void _emulateDragEnd(Element element, DraggableGroup group) {
  * If an event occurs on the [dragImageElement] it is forwarded to the element
  * underneath.
  */
-void _fireEventsForDropzone(MouseEvent mouseEvent) {
+void _fireEventsForDropzone(Element element, MouseEvent mouseEvent) {
   EventTarget target = mouseEvent.target;
-  if (target == _emulDragImage.element) {
+  if (_emulDragImage.element == target || _emulDragImage.element.contains(target)) {
     // Forward events on the drag image to element underneath.
-    target = _getElementUnder(mouseEvent);
+    target = _getElementUnder(_emulDragImage.element, mouseEvent);
   }
 
   if (_emulPrevMouseTarget == target) {
@@ -257,21 +259,14 @@ void _restoreCursor() {
 }
 
 /**
- * Returns the element that is one layer under the element where the mouse
- * is currently over. 
+ * Returns the element where the mouse is currently over. If the mouse is over
+ * [element], the element below [element] is returned.
  */
-EventTarget _getElementUnder(MouseEvent event) {
-  var target = event.target;
-  if (target is Element) {
-    target.style.visibility = 'hidden';
-    Element elementUnder = document.elementFromPoint(event.client.x, event.client.y);
-    target.style.visibility = 'visible';
-    if (elementUnder != null) {
-      return elementUnder;
-    }
-  }
-  // Could not get element under --> return original target.
-  return target;
+EventTarget _getElementUnder(Element element, MouseEvent event) {
+  element.style.visibility = 'hidden';
+  Element elementUnder = document.elementFromPoint(event.client.x, event.client.y);
+  element.style.visibility = 'visible';
+  return elementUnder;
 }
 
 /**

lib/src/dnd/dropzone.dart

@@ -91,31 +91,26 @@ class DropzoneGroup extends Group {
 
   void _handleDragEnter(Element element, Point mousePagePosition, 
                         Point mouseClientPosition, EventTarget target) {
-    _logger.finest('handleDragEnter {dragOverElements.length: ${currentDragOverElements.length}}');
+    _logger.finest('handleDragEnter');
 
-    // Only handle dropzone element itself and not any of its children.
-    if (currentDragOverElements.isEmpty) {
-      if (currentDraggableGroup.overClass != null) {
-        String overClass = currentDraggableGroup.overClass;
-        element.classes.add(overClass);
-        
-        // Make sure overClass is removed when drag ended. Is necessary 
-        // because if drag is aborted (e.g. with esc-key), no dragLeave or
-        // drop event is fired on the dropzone.
-        StreamSubscription dragEndSub;
-        dragEndSub = currentDraggableGroup.onDragEnd.listen((_) {
-          element.classes.remove(overClass);
-          dragEndSub.cancel();
-        });
-      }
+    if (currentDraggableGroup.overClass != null) {
+      String overClass = currentDraggableGroup.overClass;
+      element.classes.add(overClass);
 
-      if (_onDragEnter != null) {
-        _onDragEnter.add(new DropzoneEvent(currentDraggable, 
-            element, mousePagePosition, mouseClientPosition));
-      }
+      // Make sure overClass is removed when drag ended. Is necessary 
+      // because if drag is aborted (e.g. with esc-key), no dragLeave or
+      // drop event is fired on the dropzone.
+      StreamSubscription dragEndSub;
+      dragEndSub = currentDraggableGroup.onDragEnd.listen((_) {
+        element.classes.remove(overClass);
+        dragEndSub.cancel();
+      });
     }
 
-    currentDragOverElements.add(target);
+    if (_onDragEnter != null) {
+      _onDragEnter.add(new DropzoneEvent(currentDraggable, 
+          element, mousePagePosition, mouseClientPosition));
+    }
   }
 
   void _handleDragOver(Element element, Point mousePagePosition, Point mouseClientPosition) {
@@ -128,26 +123,21 @@ class DropzoneGroup extends Group {
   void _handleDragLeave(Element element, Point mousePagePosition, 
                         Point mouseClientPosition, EventTarget target,
                         EventTarget relatedTarget) {
-    // Firefox fires too many onDragLeave events. This condition fixes it. 
-    if (target != relatedTarget) {
-      currentDragOverElements.remove(target);
+    _logger.finest('handleDragLeave');
+    
+    if (currentDraggableGroup.overClass != null) {
+      element.classes.remove(currentDraggableGroup.overClass);
     }
-    _logger.finest('handleDragLeave {dragOverElements.length: ${currentDragOverElements.length}}');
 
-    // Only handle event if dropzone element is left and not on any of its children.
-    if (currentDragOverElements.isEmpty) {
-      if (currentDraggableGroup.overClass != null) {
-        element.classes.remove(currentDraggableGroup.overClass);
-      }
-      
-      if (_onDragLeave != null) {
-        _onDragLeave.add(new DropzoneEvent(currentDraggable, element,
-            mousePagePosition, mouseClientPosition));
-      }
+    if (_onDragLeave != null) {
+      _onDragLeave.add(new DropzoneEvent(currentDraggable, element,
+          mousePagePosition, mouseClientPosition));
     }
   }
 
   void _handleDrop(Element element, Point mousePagePosition, Point mouseClientPosition) {
+    _logger.finest('handleDrop');
+    
     if (_onDrop != null) {
       _onDrop.add(new DropzoneEvent(currentDraggable, element, 
           mousePagePosition, mouseClientPosition));
@@ -188,22 +178,37 @@ List<StreamSubscription> _installDropzone(Element element, DropzoneGroup group)
     // Do nothing if no element of this dnd is dragged.
     if (currentDraggable == null) return;
 
+    // Firefox fires too many dragEnter events. This condition fixes it. 
+    // Actually, according to W3C spec, a dragEnter event should not have a 
+    // related target at all
+    if (mouseEvent.target == mouseEvent.relatedTarget) return;
+    
     // Necessary for IE?
     mouseEvent.preventDefault();
 
-    // Test if this dropzone accepts the current draggable.
-    draggableAccepted = group._draggableAccepted();
-    if (draggableAccepted) {
-      mouseEvent.dataTransfer.dropEffect = currentDraggableGroup.dropEffect;
-    } else {
-      mouseEvent.dataTransfer.dropEffect = 'none';
-      return; // Return here as drop is not accepted.
-    }
-    
     _logger.finest('dragEnter');
-
-    group._handleDragEnter(element, mouseEvent.page, mouseEvent.client, 
-        mouseEvent.target);
+    
+    // Related target (the element dragged from) is the last entered element.
+    var relatedTarget = _lastDragEnterTarget;
+    
+    // Save current target.
+    _lastDragEnterTarget = mouseEvent.target;
+    
+    // Only continue if the event is a real event generated for the main 
+    // element and not bubbled up by any of its children. 
+    if (_isMainEvent(element, relatedTarget)) {
+      // Test if this dropzone accepts the current draggable.
+      draggableAccepted = group._draggableAccepted();
+      if (draggableAccepted) {
+        mouseEvent.dataTransfer.dropEffect = currentDraggableGroup.dropEffect;
+      } else {
+        mouseEvent.dataTransfer.dropEffect = 'none';
+        return; // Return here as drop is not accepted.
+      }
+      
+      group._handleDragEnter(element, mouseEvent.page, mouseEvent.client, 
+          mouseEvent.target);
+    } 
   }));
 
   // -------------------
@@ -233,10 +238,33 @@ List<StreamSubscription> _installDropzone(Element element, DropzoneGroup group)
     // Do nothing if no element of this dnd is dragged.
     if (currentDraggable == null || !draggableAccepted) return;
 
+    // Firefox fires too many dragLeave events. This condition fixes it. 
+    // Actually, according to W3C spec, a dragLeave event should not have a 
+    // related target at all
+    if (mouseEvent.target == mouseEvent.relatedTarget) return;
+    
     _logger.finest('dragLeave');
 
-    group._handleDragLeave(element, mouseEvent.page, mouseEvent.client,
-        mouseEvent.target, mouseEvent.relatedTarget);
+    // Related target (the element dragged to) is the last entered element.
+    var relatedTarget;
+    if (mouseEvent.target != _lastDragEnterTarget) {
+      relatedTarget = _lastDragEnterTarget;
+    } else {
+      // The mouse left the main element. When this happens, there is no 
+      // dragEnter event before the dragLeave because the entered element would
+      // be null or an element outside of the main element.
+      relatedTarget = null;      
+    }
+    
+    // Only continue if the event is a real event generated for the main 
+    // element and not bubbled up by any of its children. 
+    if (_isMainEvent(element, relatedTarget)) {
+      // Main element was left so reset the targets.
+      _lastDragEnterTarget = null;
+      
+      group._handleDragLeave(element, mouseEvent.page, mouseEvent.client,
+          mouseEvent.target, mouseEvent.relatedTarget);
+    }
   }));
 
   // -------------------
@@ -245,6 +273,7 @@ List<StreamSubscription> _installDropzone(Element element, DropzoneGroup group)
   subs.add(element.onDrop.listen((MouseEvent mouseEvent) {
     // Do nothing if no element of this dnd is dragged.
     if (currentDraggable == null || !draggableAccepted) return;
+    
     _logger.finest('drop');
 
     // Stops browsers from redirecting.
@@ -256,6 +285,26 @@ List<StreamSubscription> _installDropzone(Element element, DropzoneGroup group)
   return subs;
 }
 
+
+// As dragEnter and dragLeave events do not have the relatedTarget property set, 
+// we keep track of the last target the user entered and use this as related target.
+EventTarget _lastDragEnterTarget;
+
+/**
+ * Returns true if the mouse event with [relatedTarget] is actually a real event
+ * generated for [mainElement] and not bubbled up by any of its children. 
+ * 
+ * This is used to filter dragEnter, dragLeave, mouseOver, mouseOut events:
+ * * For dragEnter and mouseOver the [relatedTarget] must be the element the
+ *   mouse entered from. 
+ * * For dragLeave and mouseOut the [relatedTarget] must be the element the 
+ *   mouse entered to.
+ */
+bool _isMainEvent(Element mainElement, EventTarget relatedTarget) {
+  return (relatedTarget == null 
+      || (relatedTarget != mainElement && !mainElement.contains(relatedTarget)));
+}
+
 /**
  * Event for dropzone elements.
  */

lib/src/dnd/dropzone_emulated.dart

@@ -21,16 +21,13 @@ List<StreamSubscription> _installEmulatedDropzone(Element element, DropzoneGroup
 
     _logger.finest('emulated dragEnter');
 
-    if (!element.contains(mouseEvent.relatedTarget)) {
-      // Mouse was moved from outside and might have skipped some elements. 
-      // Must clear the drag over elements.
-      _logger.finest('relatedTarget is not a child of element having the listener, clearing dragOverElements.');
-      currentDragOverElements.clear();
+    // Only continue if the event is a real event generated for the main 
+    // element and not bubbled up by any of its children. 
+    if (_isMainEvent(element, mouseEvent.relatedTarget)) {
+      // screenX and screenY were abused as pageX and pageY! TODO: Wait for #11452 to be fixed.
+      Point mousePagePosition = mouseEvent.screen;
+      group._handleDragEnter(element, mousePagePosition, mouseEvent.client, mouseEvent.target);
     }
-    
-    // screenX and screenY were abused as pageX and pageY! TODO: Wait for #11452 to be fixed.
-    Point mousePagePosition = mouseEvent.screen;
-    group._handleDragEnter(element, mousePagePosition, mouseEvent.client, mouseEvent.target);
   }));
 
   // -------------------
@@ -72,10 +69,14 @@ List<StreamSubscription> _installEmulatedDropzone(Element element, DropzoneGroup
 
     _logger.finest('emulated dragLeave');
 
-    // screenX and screenY were abused as pageX and pageY! TODO: Wait for #11452 to be fixed.
-    Point mousePagePosition = mouseEvent.screen;
-    group._handleDragLeave(element, mousePagePosition, mouseEvent.client,
-        mouseEvent.target, mouseEvent.relatedTarget);
+    // Only continue if the event is a real event generated for the main 
+    // element and not bubbled up by any of its children. 
+    if (_isMainEvent(element, mouseEvent.relatedTarget)) {
+      // screenX and screenY were abused as pageX and pageY! TODO: Wait for #11452 to be fixed.
+      Point mousePagePosition = mouseEvent.screen;
+      group._handleDragLeave(element, mousePagePosition, mouseEvent.client,
+          mouseEvent.target, mouseEvent.relatedTarget);
+    }
   }));
 
   // -------------------