Merge pull request #6084 from wenzhixin/feature/6003

Pass the tableDnD events onAllowDrop and onDragStart

site/docs/extensions/reorder-rows.md

@@ -36,6 +36,35 @@ if you want you can include the bootstrap-table-reorder-rows.css file to use the
 
 - **Default:** `false`
 
+### onAllowDrop
+
+- **attribute:** `data-on-allow-drop`
+
+- **type:** `function`
+
+- **Detail:**
+
+  Pass a function that will be called as a row is over another row. If the function returns true, allow dropping on that row, otherwise not. The function takes 4 parameters:
+   - the dragged row data
+   - the data of the row under the cursor
+   - the dragged row
+   - the row under the cursor
+
+  It returns a boolean: true allows the drop, false doesn’t allow it.
+- **Default:** `null`
+
+### onDragStop
+
+- **attribute:** `data-on-drag-stop`
+
+- **type:** `function`
+
+- **Detail:**
+
+  Pass a function that will be called when the user stops dragging regardless of if the rows have been rearranged. The function takes 3 parameters: the table, the row data and the row which the user was dragging.
+
+- **Default:** `null`
+
 ### onDragStyle
 
 - **attribute:** `data-on-drag-style`

src/extensions/reorder-rows/bootstrap-table-reorder-rows.js

@@ -61,6 +61,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
       onDragStyle: this.options.onDragStyle,
       onDropStyle: this.options.onDropStyle,
       onDragClass: this.options.onDragClass,
+      onAllowDrop: (hoveredRow, draggedRow) => this.onAllowDrop(hoveredRow, draggedRow),
+      onDragStop: (table, draggedRow) => this.onDragStop(table, draggedRow),
       onDragStart: (table, droppedRow) => this.onDropStart(table, droppedRow),
       onDrop: (table, droppedRow) => this.onDrop(table, droppedRow),
       dragHandle: this.options.dragHandle
@@ -74,6 +76,22 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.options.onReorderRowsDrag(this.data[this.draggingIndex])
   }
 
+  onDragStop (table, draggedRow) {
+    const rowIndexDraggedRow = $(draggedRow).data('index')
+    const draggedRowItem = this.data[rowIndexDraggedRow]
+
+    this.options.onDragStop(table, draggedRowItem, draggedRow)
+  }
+
+  onAllowDrop (hoveredRow, draggedRow) {
+    const rowIndexDraggedRow = $(draggedRow).data('index')
+    const rowIndexHoveredRow = $(hoveredRow).data('index')
+    const draggedRowItem = this.data[rowIndexDraggedRow]
+    const hoveredRowItem = this.data[rowIndexHoveredRow]
+
+    return this.options.onAllowDrop(hoveredRowItem, draggedRowItem, hoveredRow, draggedRow)
+  }
+
   onDrop (table) {
     this.$draggingTd.css('cursor', '')
     const newData = []