Disable hoverClass when disabling or destroying sortable element (#672)

* Disable hoverClass when disabling or destroying sortable element
lukasoppermann · Mar 3, 2021 · 9a0a452 · 9a0a452
1 parent d724d4a
commit 9a0a452
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -255,7 +255,7 @@ sortable('.sortable', {
 ```
 
 ### hoverClass
-Use the `hoverClass` option to apply css classes to the hovered element rather than relying on `:hover`. This can eliminate some potential drag and drop issues where another element thinks it is being hovered over.
+Use the `hoverClass` option to apply css classes to the hovered element rather than relying on `:hover`. This can eliminate some potential drag and drop issues where another element thinks it is being hovered over. Disabled when disabling or destroying sortable element.
 
 ``` javascript
 sortable('.sortable', {

diff --git a/__tests__/sortableMethodsTests/_removeItemData.test.ts b/__tests__/sortableMethodsTests/_removeItemData.test.ts
@@ -1,13 +1,17 @@
 /* global describe,test,expect */
 import { mockInnerHTML } from '../helpers'
 import sortable from '../../src/html5sortable'
+import store from '../../src/store'
 /* eslint-env jest */
 
 describe('_removeItemData', () => {
   let ul, allLiElements, li
   beforeEach(() => {
     document.body.innerHTML = mockInnerHTML
     ul = document.body.querySelector('.sortable')
+    store(ul).config = {
+      hoverClass: 'hover-class'
+    }
     sortable(ul, 'destroy')
     // init sortable
     sortable(ul, null)

diff --git a/docs/html5sortable.js b/docs/html5sortable.js
@@ -656,7 +656,6 @@ var sortable = (function () {
    * @param {sortable} sortableContainer a valid sortableContainer
    * @param {boolean} enable enable or disable event
    */
-  // export default (sortableContainer: sortable, enable: boolean) => {
   var enableHoverClass = (function (sortableContainer, enable) {
       if (typeof store(sortableContainer).getConfig('hoverClass') === 'string') {
           var hoverClasses_1 = store(sortableContainer).getConfig('hoverClass').split(' ');
@@ -808,6 +807,8 @@ var sortable = (function () {
       var opts = addData(sortableElement, 'opts') || {};
       var items = filter(sortableElement.children, opts.items);
       var handles = getHandles(items, opts.handle);
+      // disable adding hover class
+      enableHoverClass(sortableElement, false);
       // remove event handlers & data from sortable
       removeEventListener(sortableElement, 'dragover');
       removeEventListener(sortableElement, 'dragenter');
@@ -869,6 +870,7 @@ var sortable = (function () {
       addData(sortableElement, '_disabled', 'true');
       addAttribute(handles, 'draggable', 'false');
       removeEventListener(handles, 'mousedown');
+      enableHoverClass(sortableElement, false);
   };
   /**
    * Reload the sortable

diff --git a/src/hoverClass.ts b/src/hoverClass.ts
@@ -8,7 +8,6 @@ import { addEventListener, removeEventListener } from './eventListener'
  * @param {sortable} sortableContainer a valid sortableContainer
  * @param {boolean} enable enable or disable event
  */
-// export default (sortableContainer: sortable, enable: boolean) => {
 export default (sortableContainer: sortable, enable: boolean) => {
   if (typeof store(sortableContainer).getConfig('hoverClass') === 'string') {
     const hoverClasses = store(sortableContainer).getConfig('hoverClass').split(' ')

diff --git a/src/html5sortable.ts b/src/html5sortable.ts
@@ -145,6 +145,8 @@ const destroySortable = function (sortableElement) {
   const opts = data(sortableElement, 'opts') || {}
   const items = filter(sortableElement.children, opts.items)
   const handles = getHandles(items, opts.handle)
+  // disable adding hover class
+  enableHoverClass(sortableElement, false)
   // remove event handlers & data from sortable
   off(sortableElement, 'dragover')
   off(sortableElement, 'dragenter')
@@ -205,6 +207,7 @@ const disableSortable = function (sortableElement) {
   data(sortableElement, '_disabled', 'true')
   attr(handles, 'draggable', 'false')
   off(handles, 'mousedown')
+  enableHoverClass(sortableElement, false)
 }
 /**
  * Reload the sortable