初始化3.0.0版本

km-console/packages/layout-clusters-fe/src/components/DragGroup/index.less

@@ -0,0 +1,15 @@
+.drag-container {
+}
+.drag-sort-item {
+  position: relative;
+  z-index: 2;
+  .drag-handle-icon {
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    color: #adb5bc;
+    font-size: 16px;
+    z-index: 1000;
+    cursor: move;
+  }
+}

km-console/packages/layout-clusters-fe/src/components/DragGroup/index.tsx

@@ -0,0 +1,65 @@
+import { Col, IconFont, Row } from 'knowdesign';
+import React from 'react';
+import { SortableContainer, SortableContainerProps, SortableHandle, SortableElement, SortableElementProps } from 'react-sortable-hoc';
+import './index.less';
+
+interface PropsType extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  sortableContainerProps?: SortableContainerProps;
+  gridProps?: {
+    span: number;
+    gutter: [number, number];
+  };
+  dragItemProps?: Omit<SortableElementProps, 'index'>;
+}
+
+interface SortableItemProps {
+  useDragHandle?: boolean;
+  span: number;
+}
+
+// 拖拽容器
+const DragContainer = SortableContainer(({ children, gutter }: any) => (
+  <Row className="drag-container" gutter={gutter}>
+    {children}
+  </Row>
+));
+
+// 拖拽按钮
+const DragHandle = SortableHandle(() => <IconFont className="drag-handle-icon" type="icon-tuozhuai1" />);
+
+// 拖拽项
+const SortableItem = SortableElement(
+  ({ children, sortableItemProps }: { children: React.ReactNode; sortableItemProps: SortableItemProps }) => (
+    <Col className="drag-sort-item" span={sortableItemProps.span}>
+      {sortableItemProps?.useDragHandle && <DragHandle />}
+      {children}
+    </Col>
+  )
+);
+
+const DragGroup: React.FC<PropsType> = ({ children, gridProps = { span: 8, gutter: [10, 10] }, sortableContainerProps }) => {
+  return (
+    <DragContainer pressDelay={0} {...sortableContainerProps} gutter={gridProps.gutter}>
+      {React.Children.map(children, (child: any, index: number) => {
+        // 如果传入 child 有 key 值就复用，没有的话使用 index 作为 key
+        const key = typeof child === 'object' && child !== null ? child.key || index : index;
+
+        return (
+          <SortableItem
+            key={key}
+            index={index}
+            sortableItemProps={{
+              useDragHandle: sortableContainerProps.useDragHandle || false,
+              span: gridProps.span,
+            }}
+          >
+            {child}
+          </SortableItem>
+        );
+      })}
+    </DragContainer>
+  );
+};
+
+export default DragGroup;