No longer require pointer-events: none

Author: marceljuenemann

README.md

@@ -56,7 +56,7 @@ Use the dnd-draggable directive to make your element draggable
 * `dndDraggingSource` This class will be added to the element after the drag operation was started, meaning it only affects the original element that is still at it's source position, and not the "element" that the user is dragging with his mouse pointer
 
 ### dnd-list directive
-Use the dnd-list attribute to make your list element a dropzone. Usually you will add a single li element as child with the ng-repeat directive. If you don't do that, we will not be able to position the dropped element correctly. If you want your list to be sortable, also add the dnd-draggable directive to your li element(s). Both the dnd-list and it's direct children must have position: relative CSS style, otherwise the positioning algorithm will not be able to determine the correct placeholder position in all browsers. If you use nested dnd-lists, make sure that all elements excecpt for the dnd-lists and it's direct children have the pointer-events: none CSS style.
+Use the dnd-list attribute to make your list element a dropzone. Usually you will add a single li element as child with the ng-repeat directive. If you don't do that, we will not be able to position the dropped element correctly. If you want your list to be sortable, also add the dnd-draggable directive to your li element(s). Both the dnd-list and it's direct children must have position: relative CSS style, otherwise the positioning algorithm will not be able to determine the correct placeholder position in all browsers.
 
 **Attributes**
 * `dnd-list` Required attribute. The value has to be the array in which the data of the dropped element should be inserted.
@@ -68,20 +68,16 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil
 * `dndDragover` This class will be added to the list while an element is being dragged over the list.
 
 ### Required CSS styles 
-* `pointer-events: none` With nested lists it's very important that **only the dnd-list and it's children** react to mouse events.
-* `position: relative` Both the dnd-list and it's children require this, so that the directive can determine the mouse position relative to the list and thus calculate the correct drop position.
+Both the dnd-list and it's children require relative positioning, so that the directive can determine the mouse position relative to the list and thus calculate the correct drop position.
 
 <pre>
-ul[dnd-list] * { 
-    pointer-events: none; 
-}
-
 ul[dnd-list], ul[dnd-list] > li { 
-    pointer-events: auto;
     position: relative;
 }
 </pre>
 
+*Since 1.2.0 `pointer-events: none` is no longer required*
+
 ### Example
 
 Take a look at the code in the [Simple Lists](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple) example

angular-drag-and-drop-lists.js

@@ -156,8 +156,7 @@ angular.module('dndLists', [])
      * the dropped element correctly. If you want your list to be sortable, also add the dnd-draggable
      * directive to your li element(s). Both the dnd-list and it's direct children must have position: relative
      * CSS style, otherwise the positioning algorithm will not be able to determine the correct placeholder
-     * position in all browsers. If you use nested dnd-lists, make sure that all elements excecpt for the
-     * dnd-lists and it's direct children have the pointer-events: none CSS style.
+     * position in all browsers.
      *
      * Attributes:
      * - dnd-list           Required attribute. The value has to be the array in which the data of the
@@ -210,17 +209,25 @@ angular.module('dndLists', [])
                     element.append(placeholder);
                 }
 
-                if (event.target.parentNode === listNode && event.target !== placeholderNode) {
-                    // The element is being dragged over one of our child nodes. Now we have
-                    // to decide at which position to show the placeholder: If the mouse pointer
-                    // is in the upper half of the child element, we place it before the child
-                    // element, otherwise below it. In Chrome we can just use offsetY, but in
-                    // Firefox we have to use layerY, which only works if the child element has
-                    // position relative. In IE this branch is never reached because the dragover
-                    // event is only fired for the listNode, not for it's children
-                    var beforeOrAfter = (event.offsetY || event.layerY) < event.target.offsetHeight / 2;
-                    listNode.insertBefore(placeholderNode, beforeOrAfter ? event.target : event.target.nextSibling);
-                } else if (event.target === listNode) {
+                if (event.target !== listNode) {
+                    // Try to find the node direct directly below the list node.
+                    var listItemNode = event.target;
+                    while (listItemNode.parentNode !== listNode && listItemNode.parentNode) {
+                        listItemNode = listItemNode.parentNode;
+                    }
+
+                    if (listItemNode.parentNode === listNode && listItemNode !== placeholderNode) {
+                        // The element is being dragged over one of our child nodes. Now we have
+                        // to decide at which position to show the placeholder: If the mouse pointer
+                        // is in the upper half of the child element, we place it before the child
+                        // element, otherwise below it. In Chrome we can just use offsetY, but in
+                        // Firefox we have to use layerY, which only works if the child element has
+                        // position relative. In IE this branch is never reached because the dragover
+                        // event is only fired for the listNode, not for it's children
+                        var beforeOrAfter = (event.offsetY || event.layerY) < listItemNode.offsetHeight / 2;
+                        listNode.insertBefore(placeholderNode, beforeOrAfter ? listItemNode : listItemNode.nextSibling);
+                    }
+                } else {
                     // This branch is reached when we are dragging directly over the list element.
                     // Usually we wouldn't need to do anything here, but the IE does not fire it's
                     // events for the child element, only for the list directly. Therefore we repeat

demo/nested/nested.css

@@ -1,19 +1,11 @@
 /***************************** Required styles *****************************/
 
-/**
- * With nested lists it's very important that only the droplist and the
- * draggable elements react to mouse events. This can be achieved as follows:
- */
-ul[dnd-list] * { 
-	pointer-events: none; 
-}
-
 /**
  * For the correct positioning of the placeholder element, the dnd-list and
  * it's children must have position: relative
  */
-ul[dnd-list], ul[dnd-list] > li { 
-    pointer-events: auto;
+.nestedDemo ul[dnd-list],
+.nestedDemo ul[dnd-list] > li {
 	position: relative;
 }
 

demo/simple/simple.css

@@ -1,17 +1,9 @@
-/**
- * With nested lists it's very important that only the droplist and the
- * draggable elements react to mouse events. This can be achieved as follows:
- */
-ul[dnd-list] * {
-	pointer-events: none;
-}
-
 /**
  * For the correct positioning of the placeholder element, the dnd-list and
  * it's children must have position: relative
  */
-ul[dnd-list], ul[dnd-list] > li { 
-    pointer-events: auto;
+.simpleDemo ul[dnd-list],
+.simpleDemo ul[dnd-list] > li {
 	position: relative;
 }
 

demo/types/types.css

@@ -1,17 +1,9 @@
-/**
- * With nested lists it's very important that only the droplist and the
- * draggable elements react to mouse events. This can be achieved as follows:
- */
-ul[dnd-list] * {
-	pointer-events: none;
-}
-
 /**
  * For the correct positioning of the placeholder element, the dnd-list and
  * it's children must have position: relative
  */
-ul[dnd-list], ul[dnd-list] > li { 
-    pointer-events: auto;
+.typesDemo ul[dnd-list],
+.typesDemo ul[dnd-list] > li {
 	position: relative;
 }