diff --git a/dev/handles.html b/dev/handles.html new file mode 100644 index 0000000..4879b7e --- /dev/null +++ b/dev/handles.html @@ -0,0 +1,124 @@ + + + + + + + Nested Sort | Drag Handles Demo + + + + + + + +
+

Drag Handles Demo

+ +
+ + 

+  

+

+
+
+
+
+
+
diff --git a/dev/index.html b/dev/index.html
index b0b5ca0..56ff44b 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -23,6 +23,7 @@ 
Samples

     
  • Persisting Data in Local Storage
    • 
     
  • Enable / Disable
    • 
     
  • Nesting Levels
    • 
+    
  • Drag Handles
    • 
     
  • Custom Render
    • 
   
 
diff --git a/src/main.ts b/src/main.ts
index c48696b..0d20f82 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -34,6 +34,7 @@ class NestedSort {
   listInterface: ListInterface
   listItemClassNames: Array
   mainListClassName: string
+  mouseTarget: HTMLElement
   nestingLevels: number
   placeholderList: HTMLElement
   placeholderInUse: HTMLElement
@@ -46,6 +47,7 @@ class NestedSort {
 
   constructor({
     actions = {},
+    classNames,
     data,
     droppingEdge = 15,
     el,
@@ -75,9 +77,13 @@ class NestedSort {
       droppingEdge,
     }
     this.classNames = {
-      dragged: 'ns-dragged',
-      placeholder: 'ns-placeholder',
-      targeted: 'ns-targeted',
+      ...{
+        dragged: 'ns-dragged',
+        handle: null,
+        placeholder: 'ns-placeholder',
+        targeted: 'ns-targeted',
+      },
+      ...classNames,
     }
     this.listEventListeners = {
       dragover: this.onDragOver.bind(this),
@@ -85,6 +91,7 @@ class NestedSort {
       dragenter: this.onDragEnter.bind(this),
       dragend: this.onDragEnd.bind(this),
       drop: this.onDrop.bind(this),
+      mousedown: this.onMouseDown.bind(this),
     }
     const intNestingLevels = parseInt(nestingLevels)
     this.nestingLevels = isNaN(intNestingLevels) ? -1 : intNestingLevels // values less than 0 mean infinite levels of nesting
@@ -209,6 +216,10 @@ class NestedSort {
   }
 
   onDragStart(e: DragEvent): void {
+    if (this.classNames.handle && ! this.mouseTarget.closest(`.${this.classNames.handle}`)) {
+      e.preventDefault() // Don't allow dragging if handles are specified
+      return
+    }
     this.draggedNode = e.target as HTMLElement
     this.draggedNode.classList.add(this.classNames.dragged)
     e.dataTransfer?.setData('text', '') // Hack for mobile devices
@@ -247,6 +258,10 @@ class NestedSort {
     }
   }
 
+  onMouseDown(e: MouseEvent): void {
+    this.mouseTarget = e.target as HTMLElement
+  }
+
   updateCoordination(e: DragEvent): void {
     this.calcMouseCoords(e)
     this.calcMouseToTargetedElDist()
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 533dafc..9359e3e 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -14,6 +14,7 @@ export type PlaceholderMaintenanceActions = Array<'add' | 'cleanup'>
 
 export interface ClassNames {
   dragged: string
+  handle: string | null
   placeholder: string
   targeted: string
 }
@@ -62,12 +63,14 @@ export interface EventListeners {
   dragenter: (e: object) => void
   dragend: (e: object) => void
   drop: (e: object) => void
+  mousedown: (e: object) => void
 }
 
 export type ClassNamesList = Array | string
 
 export interface Options {
   actions: Actions
+  classNames: ClassNames
   data: Array
   droppingEdge: number
   el: HTMLElement | string