@kdcloudjs/table 1.2.1-canary.7 → 1.2.2-canary.10

package/lib/table/pipeline/features/rowDrag.js

@@ -8,18 +8,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ROW_DRAG_COLUMN_CODE = void 0;
 exports.rowDrag = rowDrag;
-exports.rowDragKey = void 0;
+exports.rowDragOptionsKey = exports.rowDragKey = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
 var _react = _interopRequireDefault(require("react"));
 var _rxjs = require("rxjs");
 var _operators = require("rxjs/operators");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _styles = require("../../base/styles");
+var _const = require("../const");
+var _internals = require("../../internals");
 var ROW_DRAG_COLUMN_CODE = exports.ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
 var rowDragKey = exports.rowDragKey = 'rowDragKey';
+var rowDragOptionsKey = exports.rowDragOptionsKey = 'rowDragOptions';
 var SCROLL_OFFSET = 30;
+var SCROLL_START_OFFSET = 20;
 var defaultRowDragColumn = {
   name: '拖拽列',
   code: ROW_DRAG_COLUMN_CODE,
@@ -51,163 +57,305 @@ function rowDrag(opt) {
     var _context;
     var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
     var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
+    var rowDragApi = pipeline.addFeatureApi(_const.FeatureName.rowDrag);
+    pipeline.setFeatureOptions(rowDragOptionsKey, opt);
     if (!tableBody) return pipeline;
     var dataSource = pipeline.getDataSource();
-    var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
-    var handleDragStrat = function handleDragStrat(event) {
+    var getRowDragEvent = function getRowDragEvent(dropTargetEvent, isFinished) {
+      var dragItem = dropTargetEvent.dragItem,
+        x = dropTargetEvent.x,
+        y = dropTargetEvent.y,
+        dropZoneTarget = dropTargetEvent.dropZoneTarget,
+        startDropZoneTagret = dropTargetEvent.startDropZoneTagret,
+        commonParams = dropTargetEvent.commonParams,
+        startCommonParams = dropTargetEvent.startCommonParams,
+        event = dropTargetEvent.event,
+        dropZoneTableParams = dropTargetEvent.dropZoneTableParams;
+      var getDataSource = dropZoneTableParams.getDataSource,
+        getTreeModeOptions = dropZoneTableParams.getTreeModeOptions,
+        getRowDragOptions = dropZoneTableParams.getRowDragOptions;
+      var dataSource = getDataSource();
+      var treeModeOptions = getTreeModeOptions();
+      var rowDragOptions = getRowDragOptions();
+      var allowDragIntoRow = !!treeModeOptions && (rowDragOptions === null || rowDragOptions === void 0 ? void 0 : rowDragOptions.allowDragIntoRow);
+      var isLeave = !isMouseOnDropTarget(event, dropZoneTarget);
+      var overIndex = -1;
+      var direction = 'bottom';
+      if (!isLeave && dataSource.length > 0) {
+        var overDragItem = getDragRowItem(event.target, dropZoneTarget, dataSource);
+        if (overDragItem) {
+          var rowIndex = overDragItem.rowIndex,
+            cell = overDragItem.cell;
+          overIndex = rowIndex;
+          direction = getDirection(cell, event.clientY, allowDragIntoRow);
+        }
+      }
+      if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(event.target)) {
+        overIndex = dataSource.length - 1;
+        direction = 'bottom';
+      }
+      var overRow = overIndex >= 0 ? dataSource[overIndex] : null;
+      return {
+        startRowIndex: dragItem.rowIndex,
+        startRow: dragItem.row,
+        endRowIndex: overIndex,
+        endRow: overRow,
+        startDropZoneTagret: startDropZoneTagret,
+        startCommonParams: startCommonParams,
+        commonParams: commonParams,
+        dropZoneTarget: dropZoneTarget,
+        event: event,
+        dragPosition: direction,
+        isFinished: isFinished,
+        x: x,
+        y: y
+      };
+    };
+    var onDragging = function onDragging(event) {
       var _a;
-      // 开始拖拽
-      artTable.classList.add((0, _classnames.default)(_styles.Classes.rowDragging));
-      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragStart) === null || _a === void 0 ? void 0 : _a.call(opt, event);
+      var rowDragEvent = getRowDragEvent(event, false);
+      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
     };
-    var handleDragMove = function handleDragMove(event) {
+    var onDragStop = function onDragStop(event) {
       var _a;
-      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, event);
-      pipeline.setStateAtKey(rowDragKey, event);
+      var rowDragEvent = getRowDragEvent(event, true);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
+      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
     };
-    var handleDragEnd = function handleDragEnd(event, isValid) {
+    var onDragStart = function onDragStart(event) {
       var _a;
-      artTable.classList.remove((0, _classnames.default)(_styles.Classes.rowDragging));
-      pipeline.setStateAtKey(rowDragKey, event);
-      // 超出拖拽范围不触发dragend事件
-      if (isValid) {
-        (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
-      }
+      var rowDragEvent = getRowDragEvent(event, false);
+      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragStart) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
     };
-    var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
-      var isFinished = _ref.isFinished,
-        _ref$dragPosition = _ref.dragPosition,
-        dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
-      return {
-        startRowIndex: startRowInfo.rowIndex,
-        startRow: startRowInfo.row,
-        endRowIndex: endRowInfo.rowIndex,
-        endRow: endRowInfo.row,
-        dragPosition: dragPosition,
-        isFinished: isFinished
-      };
+    var onDragLeave = function onDragLeave(event) {
+      var _a;
+      var rowDragEvent = getRowDragEvent(event, false);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
+      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragLeave) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
     };
-    var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
-      if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
-      var clientY = mouseMoveEvent.clientY;
-      var tableBodyClientRect = tableBody.getBoundingClientRect();
-      var top = tableBodyClientRect.top,
-        height = tableBodyClientRect.height;
-      if (clientY + SCROLL_OFFSET >= top + height) {
-        pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
-      }
-      if (clientY + SCROLL_OFFSET <= top) {
-        pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
+    var onDragEnter = function onDragEnter(event) {
+      var _a;
+      var rowDragEvent = getRowDragEvent(event, false);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
+      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
+    };
+    var currentDropZone = {
+      getContainer: function getContainer() {
+        var lastPipeline = pipeline.getLastPipeline();
+        return lastPipeline.ref.current.domHelper.tableBody;
+      },
+      onDragEnter: onDragEnter,
+      onDragLeave: onDragLeave,
+      onDragging: onDragging,
+      onDragStop: onDragStop,
+      isTable: true,
+      tableParams: {
+        getDataSource: function getDataSource() {
+          var lastPipeline = pipeline.getLastPipeline();
+          return lastPipeline.getDataSource();
+        },
+        getTreeModeOptions: function getTreeModeOptions() {
+          var lastPipeline = pipeline.getLastPipeline();
+          return lastPipeline.getFeatureOptions('treeModeOptions');
+        },
+        getRowDragOptions: function getRowDragOptions() {
+          var lastPipeline = pipeline.getLastPipeline();
+          return lastPipeline.getFeatureOptions('rowDragOptions');
+        }
       }
     };
-    var onMouseDown = function onMouseDown(mouseDownEvent) {
+    var onMouseDown = function onMouseDown(event) {
       var _a;
-      var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
-      var endRowInfo = startRowInfo;
-      if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
-      if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return;
-      // 默认拖拽插入的位置是向下
-      var dragPosition = 'bottom';
-      var isOutOfRange = false;
+      var mouseDownEvent = event.nativeEvent;
+      var startDataItem = getDragRowItem(mouseDownEvent.target, tableBody, dataSource);
+      if (!startDataItem || startDataItem.code !== rowDragColumn.code) return;
+      if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startDataItem.row, startDataItem.rowIndex)) return;
       var isValidDrag = false;
-      var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
-        isFinished: false,
-        dragPosition: 'bottom'
-      });
-      handleDragStrat(dragStartEvent);
-      var tableWidth = tableBody.clientWidth;
-      var startRowRects = startRowInfo.cell.getBoundingClientRect();
-      // 光标位置距离初始拖拽行的偏移量
-      var mouseDownClientY = mouseDownEvent.clientY;
-      var startOffset = mouseDownEvent.clientY - startRowRects.top;
-      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight);
-      // 可拖拽的范围
-      var dragRange = getDragRange(tableBody, {
-        startOffset: startOffset,
-        rowHeight: rowHeight
-      });
-      var mousePosition = {
-        x: mouseDownEvent.clientX,
-        y: mouseDownEvent.clientY
+      var isDragging = false;
+      var dragElement = null;
+      var dragLine = null;
+      var lastDropTarget = null;
+      var timeoutId = null;
+      var intervalId = null;
+      var expandRowTimeoutId = null;
+      var expandRowCallBackList = [];
+      var updateScrollPosition = function updateScrollPosition(tableBody, mouseMoveEvent) {
+        if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        if (intervalId) {
+          clearInterval(intervalId);
+        }
+        if (!tableBody) return;
+        var moveOffset = getScrollMoveOffset(tableBody, mouseMoveEvent);
+        if (moveOffset === 0) {
+          return;
+        }
+        timeoutId = setTimeout(function () {
+          intervalId = setInterval(function () {
+            tableBody.scrollTop += moveOffset;
+          }, 50);
+        }, 500);
       };
-      var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
-      var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
-      var scrollCallback = function scrollCallback(event) {
-        // 在当前表格内滚动不处理
-        if (event.target === tableBody) return;
-        dragRange = getDragRange(tableBody, {
-          startOffset: startOffset,
-          rowHeight: rowHeight
+      var handleDragStart = function handleDragStart(mouseDownEvent) {
+        var _a;
+        dragElement = createDragElement(mouseDownEvent, tableBody); // 创建拖拽悬浮框
+        var isTreeTable = !!pipeline.getFeatureOptions('treeModeOptions');
+        dragLine = createDragLine(isTreeTable); // 创建拖拽插入指示线
+        var dragText = (opt === null || opt === void 0 ? void 0 : opt.rowDragText) ? (_a = opt === null || opt === void 0 ? void 0 : opt.rowDragText) === null || _a === void 0 ? void 0 : _a.call(opt, startDataItem.row, startDataItem.rowIndex) : "\u7B2C".concat(startDataItem.rowIndex, "\u884C\u5185\u5BB9");
+        setDragText(dragElement, dragText); // 设置悬浮框显示文本
+        artTable.classList.add((0, _classnames.default)(_styles.Classes.rowDragging));
+        rowDragApi.setDragStatus('start');
+        var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem, currentDropZone);
+        onDragStart(dragEvent);
+      };
+      var handleDragMove = function handleDragMove(mouseMoveEvent) {
+        var _a;
+        positionDragElemment(dragElement, mouseMoveEvent); // 更新拖拽悬浮框位置
+        rowDragApi.setDragStatus('dragging');
+        setDragElementIcon(dragElement, 'move');
+        var rowDropZones = rowDragApi.getRowDropZone();
+        var validDropZones = (0, _concat.default)(rowDropZones).call(rowDropZones, currentDropZone); // 可放置区域加上自身
+        var dropTarget = (0, _find.default)(validDropZones).call(validDropZones, function (zone) {
+          return isMouseOnDropTarget(mouseMoveEvent, zone.getContainer());
+        }) || null;
+        updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(), mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
+        if (dropTarget !== lastDropTarget) {
+          // 拖拽离开表格
+          if (lastDropTarget !== null && dropTarget === null) {
+            if (lastDropTarget.onDragLeave) {
+              setDragElementIcon(dragElement, 'notAllowed');
+              hiddenDragLine(dragLine);
+              lastDropTarget.getContainer().classList.remove(_styles.Classes.rowDragNoData);
+              var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, currentDropZone);
+              lastDropTarget.onDragLeave(dragEvent);
+            }
+          }
+          // 拖拽进入表格
+          if (lastDropTarget === null && dropTarget !== null) {
+            if (dropTarget.onDragEnter) {
+              setDragElementIcon(dragElement, 'move');
+              if (dropTarget.isTable) {
+                showDragLine(dragLine);
+                var getTreeModeOptions = dropTarget.tableParams.getTreeModeOptions;
+                var treeModeOptions = getTreeModeOptions();
+                var isTreeTable = !!treeModeOptions;
+                // 判断拖拽进入的表格是否是树形表格，控制指示线样式
+                if (isTreeTable) {
+                  dragLine.classList.add(_styles.Classes.treeTableRowDragLine);
+                } else {
+                  dragLine.classList.remove(_styles.Classes.treeTableRowDragLine);
+                }
+              }
+              var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
+              dropTarget.onDragEnter(_dragEvent);
+            }
+          }
+          lastDropTarget = dropTarget;
+        }
+        if (dropTarget) {
+          // 拖拽区域在表格中，更新拖拽插入指示线位置
+          if (dropTarget.isTable) {
+            positionDragLine({
+              lineElement: dragLine,
+              dragZone: dropTarget,
+              event: mouseMoveEvent
+            });
+          }
+          // 树形表格悬停1s展开对应行节点
+          if ((_a = dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.tableParams) === null || _a === void 0 ? void 0 : _a.getTreeModeOptions()) {
+            if (expandRowTimeoutId) {
+              clearTimeout(expandRowTimeoutId);
+            }
+            expandRowTimeoutId = setTimeout(function () {
+              var treeModeOptions = dropTarget.tableParams.getTreeModeOptions();
+              var treeMetaKey = treeModeOptions.treeMetaKey,
+                onExpand = treeModeOptions.onExpand,
+                isExpanded = treeModeOptions.isExpanded,
+                onCollapse = treeModeOptions.onCollapse;
+              // 鼠标悬停所在的拖拽行信息
+              var dataSource = dropTarget.tableParams.getDataSource();
+              var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
+              if (!dragItem) return;
+              var row = dragItem.row;
+              var _row$treeMetaKey = row[treeMetaKey],
+                rowKey = _row$treeMetaKey.rowKey,
+                isLeaf = _row$treeMetaKey.isLeaf;
+              if (!isLeaf && !isExpanded(rowKey)) {
+                onExpand(rowKey);
+                expandRowCallBackList.push(function () {
+                  return onCollapse(rowKey);
+                });
+              }
+            }, 1000);
+          }
+          if (dropTarget.onDragging) {
+            var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
+            dropTarget.onDragging(_dragEvent2);
+          }
+        }
+      };
+      var handleDragStop = function handleDragStop(mouseUpEvent) {
+        if (!isValidDrag) {
+          return;
+        }
+        removeElement(dragElement);
+        removeElement(dragLine);
+        artTable.classList.remove((0, _classnames.default)(_styles.Classes.rowDragging));
+        rowDragApi.setDragStatus('finished');
+        clearTimeout(timeoutId);
+        clearInterval(intervalId);
+        clearTimeout(expandRowTimeoutId);
+        var rowDropZones = rowDragApi.getRowDropZone();
+        rowDropZones.forEach(function (dropzone) {
+          var container = dropzone.getContainer();
+          container && container.classList.remove(_styles.Classes.rowDragNoData);
+        });
+        var validDropZones = (0, _concat.default)(rowDropZones).call(rowDropZones, currentDropZone);
+        var dropTarget = (0, _find.default)(validDropZones).call(validDropZones, function (zone) {
+          return isMouseOnDropTarget(mouseUpEvent, zone.getContainer());
         });
-        var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
-        updateCurSorStyle(isOutOfRange);
+        if (dropTarget && dropTarget.onDragStop) {
+          var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
+          dropTarget.onDragStop(dragEvent);
+        }
+        while (expandRowCallBackList.length > 0) {
+          var callback = expandRowCallBackList.pop();
+          callback();
+        }
       };
-      document.addEventListener('scroll', scrollCallback, true);
-      var rowDrag$ = mousemove$.pipe((0, _filterInstanceProperty(_operators))(function (mouseMoveEvent) {
+      var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
+      var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
+      var rowDragMove$ = mousemove$.pipe((0, _filterInstanceProperty(_operators))(function (mouseMoveEvent) {
         var mouseMoveClientY = mouseMoveEvent.clientY;
+        var mouseDownClientY = mouseDownEvent.clientY;
         // 上下移动偏移量大于5才是有效的拖拽
         if (Math.abs(mouseMoveClientY - mouseDownClientY) > 5) {
           isValidDrag = true;
         }
         return isValidDrag;
       }), (0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
-        var clientX = mouseMoveEvent.clientX,
-          clientY = mouseMoveEvent.clientY;
-        var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
-        if (tagretRow) {
-          endRowInfo = tagretRow;
+        if (!isDragging) {
+          isDragging = true;
+          handleDragStart(mouseDownEvent);
+          handleDragMove(mouseDownEvent);
         }
-        var targetRowRects = endRowInfo.cell.getBoundingClientRect();
-        // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
-        var isMoveToTop = clientY - startOffset < targetRowRects.top;
-        dragPosition = isMoveToTop ? 'top' : 'bottom';
-        isOutOfRange = isOutOfDragRange({
-          x: clientX,
-          y: clientY
-        }, dragRange);
-        mousePosition = {
-          x: clientX,
-          y: clientY
-        };
-        updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
-        updateDragElementPosition(dragElement, dragRange, {
-          x: clientX,
-          y: clientY,
-          startOffset: startOffset
-        });
-        updateCurSorStyle(isOutOfRange);
-        return {
-          startRowInfo: startRowInfo,
-          endRowInfo: endRowInfo,
-          dragPosition: dragPosition
-        };
+        handleDragMove(mouseMoveEvent);
       }), (0, _operators.takeUntil)(mouseup$));
-      rowDrag$.subscribe({
-        next: function next(_ref2) {
-          var startRowInfo = _ref2.startRowInfo,
-            endRowInfo = _ref2.endRowInfo,
-            dragPosition = _ref2.dragPosition;
-          var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
-            isFinished: false,
-            dragPosition: dragPosition
-          });
-          handleDragMove(dragMoveEvent);
-        },
-        complete: function complete() {
-          var dragEndEvent = getDragEvent(startRowInfo, endRowInfo, {
-            isFinished: true,
-            dragPosition: dragPosition
-          });
-          var isValid = isValidDrag && !isOutOfRange;
-          handleDragEnd(dragEndEvent, isValid);
-          removeDragElement(dragElement);
-          removeCurSorStyle();
-          document.removeEventListener('scroll', scrollCallback, true);
+      rowDragMove$.subscribe();
+      var rowDragEnd$ = mouseup$.pipe((0, _mapInstanceProperty(_operators))(function (mouseUpEvent) {
+        handleDragStop(mouseUpEvent);
+      })).subscribe({
+        next: function next() {
+          rowDragEnd$.unsubscribe();
         }
       });
     };
     var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
     pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
+    rowDragApi.setRowDropZoneParams(currentDropZone);
     var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
     nextColumns.unshift(rowDragColumn);
     pipeline.columns(nextColumns);
@@ -216,13 +364,27 @@ function rowDrag(opt) {
     });
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
+      var dragStatus = rowDragApi.getDragStatus();
       var startRowIndex = rowDragEvent.startRowIndex,
         endRowIndex = rowDragEvent.endRowIndex,
+        endRow = rowDragEvent.endRow,
         isFinished = rowDragEvent.isFinished,
         dragPosition = rowDragEvent.dragPosition;
       var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
-      if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
-      var className = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.Classes.rowDragStart, rowIndex === startRowIndex), _styles.Classes.rowDragEnd, rowIndex === endRowIndex), _styles.Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _styles.Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
+      var treeModeOptions = pipeline.getFeatureOptions('treeModeOptions');
+      var isTreeTable = !!treeModeOptions;
+      if (isFooterCell || isFinished || !isTreeTable && rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
+      var parentRowKeyIndex = -1;
+      if (isTreeTable && endRow) {
+        var _context2;
+        var treeMetaKey = treeModeOptions.treeMetaKey;
+        var parentRowKey = endRow[treeMetaKey].parentRowKey;
+        var primaryKey = pipeline.ensurePrimaryKey('rowDrag');
+        parentRowKeyIndex = (0, _findIndex.default)(_context2 = pipeline.getDataSource()).call(_context2, function (row) {
+          return _internals.internals.safeGetRowKey(primaryKey, row, -1) === parentRowKey;
+        });
+      }
+      var className = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.Classes.rowDragStart, rowIndex === startRowIndex && dragStatus !== 'finished'), _styles.Classes.rowDragEnd, rowIndex === endRowIndex), _styles.Classes.rowDragEndParent, isTreeTable && rowIndex === parentRowKeyIndex && dragPosition !== 'into'), _styles.Classes.rowDragEndInto, rowIndex === endRowIndex && dragPosition === 'into'), _styles.Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _styles.Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
       return {
         className: className
       };
@@ -230,7 +392,7 @@ function rowDrag(opt) {
     return pipeline;
   };
 }
-function getTargetRowInfo(target, tableBody, record) {
+function getDragRowItem(target, tableBody, record) {
   while (target && tableBody.contains(target)) {
     if (target.getAttribute('data-role') === 'table-cell') {
       var code = target.getAttribute('data-code');
@@ -249,6 +411,15 @@ function getTargetRowInfo(target, tableBody, record) {
   }
   return null;
 }
+function findTargetRow(target, tableBody) {
+  while (target && tableBody.contains(target)) {
+    if (target.getAttribute('data-role') === 'table-row') {
+      return target;
+    }
+    target = target.parentElement;
+  }
+  return null;
+}
 function isEleInFooter(target) {
   while (target && !target.classList.contains(_styles.Classes.artTable)) {
     if (target.classList.contains(_styles.Classes.tableFooter)) {
@@ -258,75 +429,318 @@ function isEleInFooter(target) {
   }
   return false;
 }
-function createDragElement(rects, tableWidth, rowHeight) {
-  var _context2, _context3, _context4;
-  var x = rects.x,
-    y = rects.y;
-  var dragMoveElement = document.createElement('div');
-  dragMoveElement.className = (0, _classnames.default)(_styles.Classes.rowDragElement);
-  dragMoveElement.style.cssText = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "position:fixed;z-index:9999;left:".concat(x, "px;top:")).call(_context4, y, "px;pointer-events:none;width:")).call(_context3, tableWidth, "px;height:")).call(_context2, rowHeight, "px;background:var(--primary-color);opacity: 0.1;");
-  document.body.appendChild(dragMoveElement);
-  return dragMoveElement;
-}
-function updateDragElementPosition(element, dragRange, _ref3) {
-  var x = _ref3.x,
-    y = _ref3.y,
-    startOffset = _ref3.startOffset;
-  var validPosition = getValidPosition({
-    x: x,
-    y: y
-  }, dragRange);
-  element.style.top = validPosition.y - startOffset + 'px';
-  return element;
+function createDragElement(mouseDownEvent, tableBody) {
+  var _context3, _context4;
+  var ELEMENT_TEMPLATE = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "<div class='".concat(_styles.Classes.rowDragElement, "'>\n      <span class='")).call(_context4, _styles.Classes.rowDragElementIcon, "'></span>\n      <div class='")).call(_context3, _styles.Classes.rowDragElementLabel, "'></div>\n    </div>");
+  var element = document.createElement('div');
+  element.innerHTML = ELEMENT_TEMPLATE;
+  var dragElement = element.firstChild;
+  var targetRow = findTargetRow(mouseDownEvent.target, tableBody);
+  if (targetRow) {
+    var rect = targetRow.getBoundingClientRect();
+    dragElement.style.height = rect.height + 'px';
+  }
+  var bodyRect = tableBody.getBoundingClientRect();
+  dragElement.style.maxWidth = bodyRect.width + 'px';
+  document.body.appendChild(dragElement);
+  return dragElement;
 }
-function removeDragElement(element) {
-  document.body.removeChild(element);
+function createDragLine(isTreeTable) {
+  var dragLine = document.createElement('div');
+  dragLine.classList.add(_styles.Classes.rowDragLine);
+  if (isTreeTable) {
+    dragLine.classList.add(_styles.Classes.treeTableRowDragLine);
+  }
+  document.body.appendChild(dragLine);
+  return dragLine;
 }
-function updateCurSorStyle(isOutOfRange) {
-  if (isOutOfRange) {
-    document.body.style.cursor = 'no-drop';
+function positionDragLine(_ref) {
+  var _context7;
+  var lineElement = _ref.lineElement,
+    dragZone = _ref.dragZone,
+    event = _ref.event;
+  var tableContainer = dragZone.getContainer();
+  var _dragZone$tableParams = dragZone.tableParams,
+    getDataSource = _dragZone$tableParams.getDataSource,
+    getTreeModeOptions = _dragZone$tableParams.getTreeModeOptions,
+    getRowDragOptions = _dragZone$tableParams.getRowDragOptions;
+  var dataSource = getDataSource();
+  var treeModeOptions = getTreeModeOptions();
+  var rowDragOptions = getRowDragOptions() || {};
+  var allowDragIntoRow = rowDragOptions.allowDragIntoRow;
+  var isTreeTable = !!treeModeOptions;
+  var bodyRect = tableContainer.getBoundingClientRect();
+  var offsetParentSize = getElementRectWithOffset(document.body);
+  if (dataSource.length === 0) {
+    tableContainer.classList.add(_styles.Classes.rowDragNoData);
+    lineElement.style.display = 'none';
   } else {
-    document.body.style.cursor = 'move';
+    tableContainer.classList.remove(_styles.Classes.rowDragNoData);
+    lineElement.style.display = 'block';
+  }
+  // 鼠标悬停所在的拖拽行信息
+  var dragItem = getDragRowItem(event.target, tableContainer, dataSource);
+  if (!dragItem) {
+    if (dataSource.length > 0 && tableContainer.contains(event.target)) {
+      var _context5, _context6;
+      var _rowIndex = dataSource.length - 1;
+      var _row = dataSource[_rowIndex];
+      var _direction = 'bottom';
+      var _targetCell = isTreeTable ? tableContainer.querySelector((0, _concat.default)(_context5 = "tr[data-rowindex=\"".concat(_rowIndex, "\"] .")).call(_context5, _styles.Classes.tableExtendCell)) : tableContainer.querySelector((0, _concat.default)(_context6 = "tr[data-rowindex=\"".concat(_rowIndex, "\"] .")).call(_context6, _styles.Classes.rowDragCell));
+      if (!_targetCell) return;
+      var _getLinePosition = getLinePosition({
+          treeModeOptions: treeModeOptions,
+          cell: _targetCell,
+          row: _row,
+          direction: _direction,
+          offsetParentSize: offsetParentSize,
+          bodyRect: bodyRect
+        }),
+        _top = _getLinePosition.top,
+        _left = _getLinePosition.left,
+        _width = _getLinePosition.width;
+      lineElement.style.left = "".concat(_left, "px");
+      lineElement.style.top = "".concat(_top, "px");
+      lineElement.style.width = "".concat(_width, "px");
+    }
+    return;
+  }
+  var cell = dragItem.cell,
+    rowIndex = dragItem.rowIndex,
+    row = dragItem.row;
+  var allowDragInto = isTreeTable && allowDragIntoRow;
+  var direction = getDirection(cell, event.clientY, allowDragInto);
+  var targetCell = isTreeTable ? tableContainer.querySelector((0, _concat.default)(_context7 = "tr[data-rowindex=\"".concat(rowIndex, "\"] .")).call(_context7, _styles.Classes.tableExtendCell)) : cell;
+  if (!targetCell) return;
+  var _getLinePosition2 = getLinePosition({
+      treeModeOptions: treeModeOptions,
+      cell: targetCell,
+      row: row,
+      direction: direction,
+      offsetParentSize: offsetParentSize,
+      bodyRect: bodyRect
+    }),
+    top = _getLinePosition2.top,
+    left = _getLinePosition2.left,
+    width = _getLinePosition2.width;
+  lineElement.style.left = "".concat(left, "px");
+  lineElement.style.top = "".concat(top, "px");
+  lineElement.style.width = "".concat(width, "px");
+  if (direction === 'into') {
+    lineElement.style.display = 'none';
+  } else {
+    lineElement.style.display = 'block';
   }
 }
-function removeCurSorStyle() {
-  document.body.style.cursor = 'default';
+function showDragLine(lineElement) {
+  lineElement.style.display = 'block';
 }
-function getDragRange(tableBody, _ref4) {
-  var startOffset = _ref4.startOffset,
-    rowHeight = _ref4.rowHeight;
-  var tableBodyClientRect = tableBody.getBoundingClientRect();
-  var height = tableBodyClientRect.height,
-    width = tableBodyClientRect.width,
-    top = tableBodyClientRect.top,
-    left = tableBodyClientRect.left;
+function hiddenDragLine(lineElement) {
+  lineElement.style.display = 'none';
+}
+function positionDragElemment(element, event) {
+  var _a, _b, _c, _d, _e, _f;
+  if (!element) return;
+  var elementRect = element.getBoundingClientRect();
+  var eleHeight = elementRect.height;
+  var browserWidth = (_b = (_a = document.body) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : window.innerHeight || ((_c = document.documentElement) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0;
+  var browserHeight = (_e = (_d = document.body) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : window.innerHeight || ((_f = document.documentElement) === null || _f === void 0 ? void 0 : _f.clientHeight) || 0;
+  var offsetParentSize = getElementRectWithOffset(element.offsetParent);
+  var clientX = event.clientX,
+    clientY = event.clientY;
+  var top = clientY - offsetParentSize.top - eleHeight / 2;
+  var left = clientX - offsetParentSize.left;
+  var windowScrollX = window.pageXOffset;
+  var windowScrollY = window.pageYOffset;
+  if (browserWidth > 0 && left + element.clientWidth > browserWidth + windowScrollX) {
+    left = Math.max(browserWidth + windowScrollX - element.clientWidth, 0);
+  }
+  if (browserHeight > 0 && top + element.clientHeight > browserHeight + windowScrollY) {
+    top = Math.max(browserHeight + windowScrollY - element.clientHeight, 0);
+  }
+  element.style.left = "".concat(left, "px");
+  element.style.top = "".concat(top, "px");
+}
+function getElementRectWithOffset(el) {
+  var offsetElementRect = el.getBoundingClientRect();
+  var _getElementSize2 = _getElementSize(el),
+    borderTopWidth = _getElementSize2.borderTopWidth,
+    borderLeftWidth = _getElementSize2.borderLeftWidth,
+    borderRightWidth = _getElementSize2.borderRightWidth,
+    borderBottomWidth = _getElementSize2.borderBottomWidth;
   return {
-    minX: left,
-    maxX: left + width,
-    minY: top - rowHeight + startOffset,
-    maxY: top + height + startOffset
+    top: offsetElementRect.top + (borderTopWidth || 0),
+    left: offsetElementRect.left + (borderLeftWidth || 0),
+    right: offsetElementRect.right + (borderRightWidth || 0),
+    bottom: offsetElementRect.bottom + (borderBottomWidth || 0)
   };
 }
-function getValidPosition(position, dragRange) {
-  var x = position.x,
-    y = position.y;
-  var minX = dragRange.minX,
-    maxX = dragRange.maxX,
-    minY = dragRange.minY,
-    maxY = dragRange.maxY;
-  var newX = x < minX ? minX : x > maxX ? maxX : x;
-  var newY = y < minY ? minY : y > maxY ? maxY : y;
+function _getElementSize(el) {
+  var _window$getComputedSt = window.getComputedStyle(el),
+    height = _window$getComputedSt.height,
+    width = _window$getComputedSt.width,
+    borderTopWidth = _window$getComputedSt.borderTopWidth,
+    borderRightWidth = _window$getComputedSt.borderRightWidth,
+    borderBottomWidth = _window$getComputedSt.borderBottomWidth,
+    borderLeftWidth = _window$getComputedSt.borderLeftWidth,
+    paddingTop = _window$getComputedSt.paddingTop,
+    paddingRight = _window$getComputedSt.paddingRight,
+    paddingBottom = _window$getComputedSt.paddingBottom,
+    paddingLeft = _window$getComputedSt.paddingLeft,
+    marginTop = _window$getComputedSt.marginTop,
+    marginRight = _window$getComputedSt.marginRight,
+    marginBottom = _window$getComputedSt.marginBottom,
+    marginLeft = _window$getComputedSt.marginLeft,
+    boxSizing = _window$getComputedSt.boxSizing;
   return {
-    x: newX,
-    y: newY
+    height: parseFloat(height || '0'),
+    width: parseFloat(width || '0'),
+    borderTopWidth: parseFloat(borderTopWidth || '0'),
+    borderRightWidth: parseFloat(borderRightWidth || '0'),
+    borderBottomWidth: parseFloat(borderBottomWidth || '0'),
+    borderLeftWidth: parseFloat(borderLeftWidth || '0'),
+    paddingTop: parseFloat(paddingTop || '0'),
+    paddingRight: parseFloat(paddingRight || '0'),
+    paddingBottom: parseFloat(paddingBottom || '0'),
+    paddingLeft: parseFloat(paddingLeft || '0'),
+    marginTop: parseFloat(marginTop || '0'),
+    marginRight: parseFloat(marginRight || '0'),
+    marginBottom: parseFloat(marginBottom || '0'),
+    marginLeft: parseFloat(marginLeft || '0'),
+    boxSizing: boxSizing
+  };
+}
+function removeElement(element) {
+  document.body.removeChild(element);
+}
+function setDragElementIcon(element, iconName) {
+  var elementIcon = element.querySelector(".".concat(_styles.Classes.rowDragElementIcon));
+  clearElementChildren(elementIcon);
+  iconName = iconName || 'notAllowed';
+  var iconElement = document.createElement('span');
+  if (iconName === 'move') {
+    iconElement.classList.add(_styles.Classes.iconMove);
+  } else if (iconName === 'notAllowed') {
+    iconElement.classList.add(_styles.Classes.iconNotAllowed);
+  }
+  elementIcon.appendChild(iconElement);
+}
+function clearElementChildren(element) {
+  while (element && element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+}
+function getScrollMoveOffset(tableBody, mouseMoveEvent) {
+  var clientY = mouseMoveEvent.clientY;
+  var tableBodyClientRect = tableBody.getBoundingClientRect();
+  var top = tableBodyClientRect.top,
+    height = tableBodyClientRect.height;
+  if (clientY >= top + height - SCROLL_START_OFFSET && clientY <= top + height) {
+    return SCROLL_OFFSET;
+  }
+  if (clientY >= top && clientY <= top + SCROLL_START_OFFSET) {
+    return -SCROLL_OFFSET;
+  }
+  return 0;
+}
+function setDragText(element, dragText) {
+  var dragTextString = dragText.toString();
+  var elementIcon = element.querySelector(".".concat(_styles.Classes.rowDragElementLabel));
+  var stringNode = document.createTextNode(dragTextString);
+  elementIcon.appendChild(stringNode);
+}
+function isMouseOnDropTarget(mouseEvent, target) {
+  return target.contains(mouseEvent.target);
+}
+function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
+  var dropZoneTarget = dropZone.getContainer();
+  var startDropZoneTagret = startDropZone.getContainer();
+  var rect = dropZoneTarget.getBoundingClientRect();
+  var x = event.clientX - rect.left;
+  var y = event.clientY - rect.top;
+  var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
+  var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
+  var targetEvent = {
+    dragItem: dragItem,
+    startDropZoneTagret: startDropZoneTagret,
+    startCommonParams: startCommonParams,
+    dropZoneTarget: dropZoneTarget,
+    event: event,
+    x: x,
+    y: y
   };
+  if (dropZone.isTable) {
+    var dropZoneOptions = dropZone.tableParams.getRowDragOptions();
+    var commonParams = dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.commonParams;
+    targetEvent.dropZoneTableParams = dropZone.tableParams;
+    targetEvent.commonParams = commonParams;
+  }
+  return targetEvent;
+}
+function getDirection(cell, clientY) {
+  var isTreeTable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var _cell$getBoundingClie = cell.getBoundingClientRect(),
+    height = _cell$getBoundingClie.height,
+    y = _cell$getBoundingClie.y;
+  var direction = 'bottom';
+  if (isTreeTable) {
+    if (y + height / 4 > clientY) {
+      direction = 'top';
+    } else if (y + height * 3 / 4 > clientY) {
+      direction = 'into';
+    }
+  } else if (y + height / 2 > clientY) {
+    direction = 'top';
+  }
+  return direction;
 }
-function isOutOfDragRange(position, dragRange) {
-  var x = position.x,
-    y = position.y;
-  var minX = dragRange.minX,
-    maxX = dragRange.maxX,
-    minY = dragRange.minY,
-    maxY = dragRange.maxY;
-  return x > maxX || x < minX || y > maxY || y < minY;
-}
+var getLinePosition = function getLinePosition(_ref2) {
+  var treeModeOptions = _ref2.treeModeOptions,
+    cell = _ref2.cell,
+    row = _ref2.row,
+    direction = _ref2.direction,
+    offsetParentSize = _ref2.offsetParentSize,
+    bodyRect = _ref2.bodyRect;
+  var isTreeTable = !!treeModeOptions;
+  if (isTreeTable) {
+    var iconWidth = treeModeOptions.iconWidth,
+      iconIndent = treeModeOptions.iconIndent,
+      iconGap = treeModeOptions.iconGap,
+      indentSize = treeModeOptions.indentSize,
+      treeMetaKey = treeModeOptions.treeMetaKey;
+    var _getElementSize3 = _getElementSize(cell),
+      paddingLeft = _getElementSize3.paddingLeft;
+    var expandCellRect = cell.getBoundingClientRect();
+    var _row$treeMetaKey2 = row[treeMetaKey],
+      rowKey = _row$treeMetaKey2.rowKey,
+      depth = _row$treeMetaKey2.depth,
+      isLeaf = _row$treeMetaKey2.isLeaf,
+      expanded = _row$treeMetaKey2.expanded;
+    var addWidth = isLeaf ? iconWidth + iconGap : 0;
+    var indent = iconIndent + depth * indentSize + addWidth;
+    var x = expandCellRect.x,
+      _y = expandCellRect.y,
+      _height = expandCellRect.height;
+    var _top2 = direction === 'bottom' ? _y + _height - offsetParentSize.top : _y - offsetParentSize.top;
+    var offsetX = Math.max(x + paddingLeft + indent - bodyRect.x, 0);
+    var _left2 = bodyRect.x + offsetX - offsetParentSize.left;
+    var _width2 = bodyRect.width - offsetX;
+    return {
+      top: _top2,
+      left: _left2,
+      width: _width2
+    };
+  }
+  // 根据鼠标悬停位置所在单元格和显示位置计算拖拽线的位置
+  var rect = cell.getBoundingClientRect();
+  var y = rect.y,
+    height = rect.height;
+  var top = direction === 'bottom' ? y + height - offsetParentSize.top : y - offsetParentSize.top;
+  var left = bodyRect.x - offsetParentSize.left;
+  var width = bodyRect.width;
+  return {
+    top: top,
+    left: left,
+    width: width
+  };
+};