Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 081c678

Browse files
feat: 拖拽组件demo
1 parent 86331d2 commit 081c678

File tree

4 files changed

+43
-19
lines changed

4 files changed

+43
-19
lines changed

‎src/views/common/drag/components/DraggableBox.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React, { useEffect, useImperativeHandle,useState } from 'react'
22
import './draggable.scss'
33
import { useComponentStyle, usePointStyle } from '../hooks/useStyle'
44
import { AttrType } from '../types'
@@ -7,7 +7,7 @@ import useMouse from '../hooks/useMouse'
77
import { B } from 'mockjs'
88

99
export interface DraggableBoxProps {
10-
children: JSX.Element
10+
children: React.ReactNode
1111
attrs: AttrType
1212
active?: boolean
1313
scale?: number // 后续需要验证大于0
@@ -26,14 +26,15 @@ export interface DraggableBoxProps {
2626
onResizeStart?: (e: React.MouseEvent, point: string) => void | boolean
2727
onResize?: (attrs: AttrType, point: string) => void
2828
onResizeEnd?: (attrs: AttrType, point: string) => void
29+
onClick?: (e: React.MouseEvent) => void
2930
}
3031

3132
// 锚点
3233
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
3334
// 光标朝向
3435
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
3536

36-
const DraggableBox = (props: DraggableBoxProps) => {
37+
const DraggableBox = (props: DraggableBoxProps,ref: any) => {
3738
const {
3839
attrs,
3940
onPonitMouseHandle,
@@ -42,8 +43,10 @@ const DraggableBox = (props: DraggableBoxProps) => {
4243
isDragging,
4344
isResizing
4445
} = useMouse(props)
46+
useImperativeHandle(ref, () => dragBoxRef.current)
4547
return (
4648
<div
49+
onClick={(e) => props.onClick?.(e)}
4750
ref={dragBoxRef}
4851
className={
4952
'draggableBox' +
@@ -77,13 +80,14 @@ const DraggableBox = (props: DraggableBoxProps) => {
7780
</div>
7881
)
7982
}
80-
DraggableBox.defaultProps = {
83+
const RefDraggableBox = React.forwardRef(DraggableBox)
84+
85+
RefDraggableBox.defaultProps = {
8186
scale: 1,
8287
active: false,
8388
parent: true,
8489
resizable: true,
8590
draggable: true,
8691
zIndex: 20
8792
}
88-
89-
export default DraggableBox
93+
export default RefDraggableBox

‎src/views/common/drag/components/draggable.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@
22
position: absolute;
33
cursor: move;
44
box-sizing: content-box;
5-
6-
&:hover {
7-
outline: 1px dashed #1890FF;
8-
}
9-
5+
outline: 1px dashed #1890FF;
106
}
117

128
.draggablePoint {

‎src/views/common/drag/dragPage.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
}
1515

1616
.modal {
17-
background-color: red;
17+
background-color: yellow;
1818
}
1919

2020
.dragging {
21-
border: 1px solid #000;
21+
outline: 1px solid #000;
2222
}

‎src/views/common/drag/index.tsx‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React,{useEffect,useRef,useState} from 'react'
22
import DraggableBox from './components/DraggableBox'
33
import './dragPage.scss'
44
import { AttrType } from './types'
@@ -7,6 +7,7 @@ const CommonDrag = () => {
77
attrs: AttrType
88
content: string
99
}
10+
const [activeIndex, setActiveIndex] = useState<number>(-1)
1011
const list: DragItem[] = [
1112
{
1213
attrs: {
@@ -27,8 +28,9 @@ const CommonDrag = () => {
2728
content: '测试2'
2829
}
2930
]
30-
function onDragStart() {
31+
function onDragStart(index: number) {
3132
console.log('onDragStart')
33+
setActiveIndex(index)
3234
}
3335
function onDrag(attrs: AttrType) {
3436
console.log('onDrag')
@@ -49,25 +51,47 @@ const CommonDrag = () => {
4951
console.log(attrs)
5052
console.log(point)
5153
}
54+
const dragRefList = useRef<any[]>([])
55+
function getDragRef(dom: React.MutableRefObject<HTMLDivElement | null>) {
56+
dragRefList.current.push(dom)
57+
}
58+
function handle(e: any) {
59+
setActiveIndex(-1)
60+
}
61+
useEffect(() => {
62+
// 获取实例
63+
console.log(dragRefList.current)
64+
}, [])
5265
return (
5366
<div className="page-container">
54-
<div className="drag-parent">
67+
<div className="drag-parent"onClick={handle}>
5568
{list.map((item, index) => {
5669
return (
5770
<DraggableBox
58-
onDragStart={onDragStart}
71+
ref={getDragRef}
72+
onClick={(e) => e.stopPropagation()}
73+
onDragStart={() => onDragStart(index)}
5974
onDrag={onDrag}
6075
onDragEnd={onDragEnd}
6176
onResizeStart={onResizeStart}
6277
onResize={onResize}
6378
onResizeEnd={onResizeEnd}
6479
key={index}
65-
active={true}
80+
active={activeIndex==index}
6681
classNameDragging="dragging"
6782
classNameActiveModal="modal"
6883
attrs={item.attrs}
6984
>
70-
<div>{item.content}</div>
85+
<div
86+
style={{
87+
height: '100%',
88+
display: 'flex',
89+
alignItems: 'center',
90+
justifyContent: 'center'
91+
}}
92+
>
93+
{item.content}
94+
</div>
7195
</DraggableBox>
7296
)
7397
})}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /