🐞 fix: remove grab cursor for all draggable elements while grabbing

my-test-examples/src/App.vue

@@ -33,12 +33,12 @@ import ExampleHorizontalCounterList from "./components/ExampleHorizontalCounterL
     <ExampleCounterList id="example-counter-list" />
   </div>
   <ExampleGroupOflist id="example-group-list" />
-  <!-- <ExampleOfPokemonList id="example-pokemon-list" /> -->
   <ExampleTable />
   <ExampleListWithRemove id="example-lists-with-remove" />
   <ExampleListGroupDroppableAndDraggableClasses id="example-list-group-droppable-and-draggable-classes" />
   <ExampleCompoundDroppable id="example-compound-droppable" />
-  <ExampleHorizontalCounterList id="example-horizontal-counter-list" />
+  <!-- <ExampleHorizontalCounterList id="example-horizontal-counter-list" /> -->
+  <!-- <ExampleOfPokemonList id="example-pokemon-list" /> -->
 
 </template>
 <style>

src/composables/HandlerPublisher.ts

@@ -0,0 +1,20 @@
+import { GRAB_CLASS } from "../utils/classes";
+
+export default class HandlerPublisher{
+    handlers: Element [];
+    constructor() {
+        this.handlers = []
+    }
+    addSubscriber(subscriber: Element){
+        if (this.handlers.includes(subscriber)) {
+            return
+        }
+        this.handlers.push(subscriber)
+        subscriber.classList.add(GRAB_CLASS)
+    }
+    toggleGrabClass(force:boolean){
+        for (const handler of this.handlers) {
+            handler.classList.toggle(GRAB_CLASS, force)
+        }
+    }
+}

src/composables/useDragAndDrop.ts

@@ -6,6 +6,7 @@ import { Config } from ".";
 import { observeMutation } from "../utils/observer";
 import ConfigHandler from "./configHandler";
 import { getConfig } from "../utils/config";
+import HandlerPublisher from "./HandlerPublisher";
 
 /**
  * Create the parent element of the draggable children and all the drag and drop events and styles.
@@ -15,6 +16,7 @@ import { getConfig } from "../utils/config";
  * @param config - Configuration of drag and drop tool.
  * @returns The reference of the parent element and function to remove an element.
  */
+const handlerPublisher = new HandlerPublisher()
 export default function useDragAndDrop<T>(items: Ref<T[]>, config?: Config) {
   const INDEX_ATTR = "index";
   const parent = ref<HTMLElement | undefined>();
@@ -54,7 +56,8 @@ export default function useDragAndDrop<T>(items: Ref<T[]>, config?: Config) {
           childHTMLElement,
           numberIndex,
           getConfig(onRemoveAtEvent, onInsertEvent, config),
-          parent.value
+          parent.value,
+          handlerPublisher
         );
         removeAtFromElements.push(removeAtFromElement);
       }

src/composables/useDraggable.ts

@@ -22,15 +22,17 @@ import {
   getClassesList,
   getClassesSelector,
 } from "../utils/dom/classList";
-import { DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRABBING_CLASS, HANDLER_CLASS } from "../utils/classes";
+import { DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRAB_CLASS, GRABBING_CLASS, HANDLER_CLASS } from "../utils/classes";
+import HandlerPublisher from "./HandlerPublisher";
 
 const DROPPABLE_CLASS = "droppable";
 
 export default function useDraggable<T>(
   child: HTMLElement | undefined,
   index: number,
   config: CoreConfig<T>,
-  parent: HTMLElement
+  parent: HTMLElement,
+  handlerPublisher: HandlerPublisher
 ) {
   const {
     handlerSelector,
@@ -74,27 +76,34 @@ export default function useDraggable<T>(
     fixedWidth,
     index,
     parent,
-    droppableGroupClass
+    droppableGroupClass,
+    handlerPublisher
   );
   const setDraggable = () => {
     if (childRef.value) {
       childRef.value.classList.add(DRAGGABLE_CLASS);
     }
   };
+  function addHandlerClass(handlerElement:Element| HTMLElement){
+    handlerElement.classList.add(HANDLER_CLASS)
+    handlerPublisher.addSubscriber(handlerElement)
+  }
   const setHandlerStyles = () => {
     if (childRef.value && isDraggable(childRef.value)) {
       const handlerElement = childRef.value.querySelector(handlerSelector);
       if (handlerElement) {
-        handlerElement.classList.add(HANDLER_CLASS);
+        addHandlerClass(handlerElement)
       } else {
-        childRef.value.classList.add(HANDLER_CLASS);
+        addHandlerClass(childRef.value)
       }
     }
   };
+
   const setCssStyles = () => {
     AddCssStylesToElement(document, [
       `.${DRAGGABLE_CLASS} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
-      `.${HANDLER_CLASS} { cursor: grab; pointer-events: auto !important; }`,
+      `.${HANDLER_CLASS} { pointer-events: auto !important; }`,
+      `.${GRAB_CLASS} { cursor: grab; }`,
       ".temp-child { touch-action: none; pointer-events: none; box-sizing: border-box !important; }",
       `.droppable { box-sizing: border-box !important; }`,
       `.${DRAGGING_CLASS} { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }`,
@@ -447,4 +456,5 @@ export default function useDraggable<T>(
 // TODO: use semantic-realese https://medium.comr/@davidkelley87/using-semantic-release-for-npm-libraries-with-github-actions-234461235fa7
 ///~https://github.com/iamstevendao/vue-tel-input/blob/main/.github/workflows/deploy.yml
 
-// TODO: add warning on docs with tranform animation
+// TODO: add warning on docs with tranform animation
+// TODO: fix bug of elements dragged in another droppable and drop outside this droppable have wrong drop position

src/utils/classes.ts

@@ -4,3 +4,5 @@ export const DRAGGING_CLASS = 'dragging'
 export const DRAGGING_HANDLER_CLASS = "dragging-handler-class";
 export const DROPPING_CLASS = "dropping"; 
 export const GRABBING_CLASS = "grabbing"; 
+export const GRAB_CLASS = "grab"; 
+

src/utils/events/emitEvents.ts

@@ -17,7 +17,7 @@ import { IsHTMLElement } from "../touchDevice";
 import { removeTempChild } from "../tempChildren";
 import { DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRABBING_CLASS } from "../classes";
 import { getClassesSelector } from "../dom/classList";
-
+import HandlerPublisher from '../../composables/HandlerPublisher'
 const DELAY_TIME_TO_SWAP=50
 
 type DraggingEvent = typeof DRAG_EVENT | typeof START_DRAG_EVENT;
@@ -32,6 +32,7 @@ export default function useEmitEvents<T>(
   index: number,
   parent: HTMLElement,
   droppableGroupClass: string | null,
+  handlerPublisher: HandlerPublisher
 ) {
   const actualIndex = ref(index);
   const {
@@ -46,7 +47,7 @@ export default function useEmitEvents<T>(
     event: DragAndDropEvent,
     initialWindowScroll: WindowScroll,
     droppableConfig: DroppableConfig<T> | undefined,
-    positionOnSourceDroppable?: number
+    positionOnSourceDroppable?: number,
   ) => {
     if (!droppableConfig) {
       return;
@@ -457,6 +458,7 @@ export default function useEmitEvents<T>(
   const toggleDraggingClass = (element: Element, force: boolean) => {
     element.classList.toggle(DRAGGING_CLASS, force);
     toogleHandlerDraggingClass(force, element);
+    handlerPublisher.toggleGrabClass(!force)
   };
   return {
     emitEventToSiblings,