fix: add allowDragFromClosest to make .slick-cell or child draggable (#897)

* fix: regression with RowMoveManager, row could no longer be moved

* fix: add `allowDragFromClosest` to make any .`slick-cell` draggable

Author: ghiscoding

src/models/interactions.interface.ts

@@ -8,9 +8,12 @@ export interface DraggableOption {
   /** container DOM element, defaults to "document" */
   containerElement?: HTMLElement | Document;
 
-  /** when defined, only allow dragging from an element that matches a specific query selector */
+  /** when defined, will allow dragging from a specific element by using the .matches() query selector. */
   allowDragFrom?: string;
 
+  /** when defined, will allow dragging from a specific element or its closest parent by using the .closest() query selector. */
+  allowDragFromClosest?: string;
+
   /** drag initialized callback */
   onDragInit?: Function;
 

src/slick.grid.ts

@@ -819,6 +819,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         this.slickDraggableInstance = Draggable({
           containerElement: this._container,
           allowDragFrom: 'div.slick-cell',
+          allowDragFromClosest: 'div.slick-cell',
           onDragInit: this.handleDragInit.bind(this),
           onDragStart: this.handleDragStart.bind(this),
           onDrag: this.handleDrag.bind(this),

src/slick.interactions.ts

@@ -19,6 +19,7 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  * available optional options:
  *   - containerElement: container DOM element, defaults to "document"
  *   - allowDragFrom: when defined, only allow dragging from an element that matches a specific query selector
+ *   - allowDragFromClosest: when defined, only allow dragging from an element or its parent matching a specific .closest() query selector
  *   - onDragInit: drag initialized callback
  *   - onDragStart: drag started callback
  *   - onDrag: drag callback
@@ -67,7 +68,7 @@ export function Draggable(options: DraggableOption) {
     const targetEvent: MouseEvent | Touch = (event as TouchEvent)?.touches?.[0] ?? event;
     const { target } = targetEvent;
 
-    if (!options.allowDragFrom || (options.allowDragFrom && element.matches(options.allowDragFrom))) {
+    if (!options.allowDragFrom || (options.allowDragFrom && (element.matches(options.allowDragFrom)) || (options.allowDragFromClosest && element.closest(options.allowDragFromClosest)))) {
       originaldd.dragHandle = element as HTMLElement;
       const winScrollPos = Utils.windowScrollPosition();
       startX = winScrollPos.left + targetEvent.clientX;