Dragleave (#540)

* dispatches sortenter event first time dragged item enters a container;
makes sure original target is sent with the sortenter and sortstart event;

* fix styling issues

* Added containerClass, a css class added when dragitem hover on a container; fires sortenter when a dragitem enters a container; fires dragleave when a dragitem leaves a container.

* Renamed variables and cleaned cde

* Delete package-lock.json

* Revert "Delete package-lock.json"

This reverts commit 802a55f.

* Update package-lock.json

Trying to fix package-lock

* Fixed typo, added comments for better understanding

Co-authored-by: gabriel <gabrielgoller123@gmail.com>
Co-authored-by: Lukas Oppermann <oppermann.lukas@gmail.com>

Author: 3 people

README.md

@@ -183,6 +183,15 @@ sortable('.sortable')[0].addEventListener('sortupdate', function(e) {
 });
 ```
 
+### sortenter 
+
+Fired when a dragitem enters a sortable container. 
+
+### sortleave
+
+Fired when a dragitem leaves a sortable container. 
+
+
 ## Options
 
 ### items
@@ -253,6 +262,15 @@ sortable('.sortable', {
 });
 ```
 
+### dropTargetContainerClass
+Use `dropTargetContainerClass` option to apply a css Class to the container. The class is added when dragged item enters the container and removed when it leaves it (or is dropped).
+
+``` javascript
+sortable('.sortable', {
+  dropTargetContainerClass: 'is-drop-target' // Defaults to false
+});
+```
+
 ### maxItems
 Use the `maxItems` option to restrict the number of items that can be added to a sortable from a [connected](#connectwith) sortable. `maxItems` should always be combined with the `items` option. Make sure `items` does not match placeholder and other options, so that they are not counted.
 

docs/html5sortable.js

@@ -603,6 +603,7 @@ var sortable = (function () {
       placeholderClass: 'sortable-placeholder',
       draggingClass: 'sortable-dragging',
       hoverClass: false,
+      dropTargetContainerClass: false,
       debounce: 0,
       throttleTime: 100,
       maxItems: 0,
@@ -719,6 +720,15 @@ var sortable = (function () {
       removeEventListener(items, 'mouseenter');
       removeEventListener(items, 'mouseleave');
   };
+  // Remove container events
+  var _removeContainerEvents = function () {
+      if (originContainer) {
+          removeEventListener(originContainer, 'dragleave');
+      }
+      if (previousContainer && (previousContainer !== originContainer)) {
+          removeEventListener(previousContainer, 'dragleave');
+      }
+  };
   /**
    * _getDragging returns the current element to drag or
    * a copy of the element.
@@ -804,6 +814,7 @@ var sortable = (function () {
       removeEventListener(handles, 'mousedown');
       _removeItemEvents(items);
       _removeItemData(items);
+      _removeContainerEvents();
       // clear sortable flag
       sortableElement.isSortable = false;
   };
@@ -865,6 +876,7 @@ var sortable = (function () {
       addData(sortableElement, '_disabled', 'false');
       // remove event handlers from items
       _removeItemEvents(items);
+      _removeContainerEvents();
       removeEventListener(handles, 'mousedown');
       // remove event handlers from sortable
       removeEventListener(sortableElement, 'dragover');
@@ -995,6 +1007,9 @@ var sortable = (function () {
               if (sortableContainer && sortableContainer !== previousContainer) {
                   destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
                       .filter(function (item) { return item !== store(sortableElement).placeholder; });
+                  if (options.dropTargetContainerClass) {
+                      sortableContainer.classList.add(options.dropTargetContainerClass);
+                  }
                   sortableContainer.dispatchEvent(new CustomEvent('sortenter', {
                       detail: {
                           origin: {
@@ -1010,6 +1025,25 @@ var sortable = (function () {
                           originalTarget: target
                       }
                   }));
+                  addEventListener(sortableContainer, 'dragleave', function (e) {
+                      var outTarget = e.releatedTarget || e.fromElement;
+                      if (!e.currentTarget.contains(outTarget)) {
+                          if (options.dropTargetContainerClass) {
+                              sortableContainer.classList.remove(options.dropTargetContainerClass);
+                          }
+                          sortableContainer.dispatchEvent(new CustomEvent('sortleave', {
+                              detail: {
+                                  origin: {
+                                      elementIndex: originElementIndex,
+                                      index: originIndex,
+                                      container: sortableContainer
+                                  },
+                                  item: dragging,
+                                  originalTarget: target
+                              }
+                          }));
+                      }
+                  });
               }
               previousContainer = sortableContainer;
           });
@@ -1096,6 +1130,9 @@ var sortable = (function () {
               var destinationElementIndex = _index(dragging, Array.from(dragging.parentElement.children)
                   .filter(function (item) { return item !== placeholder; }));
               var destinationIndex = _index(dragging, destinationItems);
+              if (options.dropTargetContainerClass) {
+                  destinationContainer.classList.remove(options.dropTargetContainerClass);
+              }
               /*
                * When a list item changed container lists or index within a list
                * Fires Custom Event - 'sortupdate'

src/defaultConfiguration.ts

@@ -13,6 +13,7 @@ export default {
   placeholderClass: 'sortable-placeholder',
   draggingClass: 'sortable-dragging',
   hoverClass: false,
+  dropTargetContainerClass: false,
   debounce: 0,
   throttleTime: 100,
   maxItems: 0,

src/html5sortable.ts

@@ -60,6 +60,17 @@ const _removeItemEvents = function (items) {
   _off(items, 'mouseenter')
   _off(items, 'mouseleave')
 }
+
+// Remove container events
+const _removeContainerEvents = function () {
+  if (originContainer) {
+    _off(originContainer, 'dragleave')
+  }
+  if (previousContainer && (previousContainer !== originContainer)) {
+    _off(previousContainer, 'dragleave')
+  }
+}
+
 /**
  * _getDragging returns the current element to drag or
  * a copy of the element.
@@ -146,6 +157,7 @@ const _destroySortable = function (sortableElement) {
   _off(handles, 'mousedown')
   _removeItemEvents(items)
   _removeItemData(items)
+  _removeContainerEvents()
   // clear sortable flag
   sortableElement.isSortable = false
 }
@@ -206,6 +218,7 @@ const _reloadSortable = function (sortableElement) {
   _data(sortableElement, '_disabled', 'false')
   // remove event handlers from items
   _removeItemEvents(items)
+  _removeContainerEvents()
   _off(handles, 'mousedown')
   // remove event handlers from sortable
   _off(sortableElement, 'dragover')
@@ -349,6 +362,9 @@ export default function sortable (sortableElements, options: configuration|objec
         destinationItemsBeforeUpdate = _filter(sortableContainer.children, _data(sortableContainer, 'items'))
           .filter(item => item !== store(sortableElement).placeholder)
 
+        if (options.dropTargetContainerClass) {
+          sortableContainer.classList.add(options.dropTargetContainerClass)
+        }
         sortableContainer.dispatchEvent(new CustomEvent('sortenter', {
           detail: {
             origin: {
@@ -364,8 +380,29 @@ export default function sortable (sortableElements, options: configuration|objec
             originalTarget: target
           }
         }))
-      }
 
+        _on(sortableContainer, 'dragleave', e => {
+          // TODO: rename outTarget to be more self-explanatory
+          // e.fromElement for very old browsers, similar to relatedTarget
+          const outTarget = e.relatedTarget || e.fromElement
+          if (!e.currentTarget.contains(outTarget)) {
+            if (options.dropTargetContainerClass) {
+              sortableContainer.classList.remove(options.dropTargetContainerClass)
+            }
+            sortableContainer.dispatchEvent(new CustomEvent('sortleave', {
+              detail: {
+                origin: {
+                  elementIndex: originElementIndex,
+                  index: originIndex,
+                  container: sortableContainer
+                },
+                item: dragging,
+                originalTarget: target
+              }
+            }))
+          }
+        })
+      }
       previousContainer = sortableContainer
     })
 
@@ -464,6 +501,10 @@ export default function sortable (sortableElements, options: configuration|objec
         .filter(item => item !== placeholder))
       const destinationIndex = _index(dragging, destinationItems)
 
+      if (options.dropTargetContainerClass) {
+        destinationContainer.classList.remove(options.dropTargetContainerClass)
+      }
+
       /*
        * When a list item changed container lists or index within a list
        * Fires Custom Event - 'sortupdate'