使用React+TS编写逻辑代码，less编写样式代码，不依赖第三方库，开箱即用，
最近写的拖拽组件，分享给大家，直接上代码
首先看看如何使用
自己定义的组件需要包裹在DragList.Item组件中
import DragList from './DragList';
<DragList
listPlus={[{ label: '标题' }]}
listDataChange={(info: any) => {
console.log(info)
}}
>
<DragList.Item>111</DragList.Item>
<DragList.Item>222</DragList.Item>
<DragList.Item>333</DragList.Item>
<DragList.Item>444</DragList.Item>
<DragList.Item>555</DragList.Item>
</DragList>
组件展示
拖拽组件.gif
TS 部分
import React, { useState, useEffect, useRef, useMemo, useLayoutEffect } from "react";
import styles from "./index.module.less"
export interface listDataChangeType {
originIndex: number,// 移动前的索引 或 点击删除的索引 或者新增的组件的索引
targetIndex?: number,// 移动后的目标索引
type: 'move' // 操作的类型
}
interface DragListProps {
listDataChange: (changeInfo: listDataChangeType) => void //数据变化
children: React.ReactNode
}
enum MoveDownAndUp {
down = 1,
up = -1
}
const DragItem: React.FC<{children:React.ReactNode}> = ({ children }) => {
useLayoutEffect(() => {
let dragItem = Array.from(document.querySelectorAll('div[data-drag-warper]'))
// 最大值
let maxHeight = Math.max.apply(Math, dragItem.map(item => { return item['clientHeight'] }))
dragItem.forEach((item: any) => {
item.style.setProperty('--drag-offest-height', `${maxHeight}px`)
})
}, [])
return <div data-drag-warper className={styles['drag-item']}>{children}</div>
}
const DragList: React.FC<DragListProps> = ({ children, listDataChange}) => {
/** 是否显示遮罩层，实现移动和鼠标松开 */
const [dragging, setDragging] = useState<boolean>(false);
/** 当前索引数 */
const [draggingItemIndex, setDraggingItemIndex] = useState<number>(-1);
const [originIndex, setOriginIndex] = useState<number>(-1)
/** 当前点击移动列的y轴偏移量 */
const [startPageY, setStartPageY] = useState<number>(0);
/** 设置移动列偏移量 */
const [offsetY, setOffsetY] = useState<number>(0);
// 偏移的高度
const [lineHeight, setLineHeight] = useState<number>(0)
const listContainer = useRef<HTMLDivElement>(null)
const [childList, setChildList] = useState<React.ReactElement[]>([])
const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
// 处理childran
const validChildren: any = useMemo(() => {
return React.Children.map(children, (child) => {
if (!React.isValidElement(child)) return null
if (child.type !== DragItem) {
console.error('The children of `DragList` must be `DragList.Item` components.')
return null
}
return React.cloneElement(child, { ...child.props })
})
}, [children])
// 计算偏移位置
useEffect(() => {
let clientHeight = listContainer?.current?.clientHeight || 0
let length = childList.length
if (clientHeight > 0) {
setLineHeight((clientHeight - 10 * (length - 1)) / length)
}
}, [childList])
// 避免修改validChildren
useEffect(() => {
setChildList(validChildren)
}, [validChildren])
/** 拖拽开始 */
const onDragStart = (event: React.DragEvent, index: number) => {
if (childList.length === 1) return
setDragging(true);
setDraggingItemIndex(index);
setStartPageY(event.pageY);
setOriginIndex(index)
};
/** 鼠标松开 */
const handleMouseUp = () => {
if (childList.length === 1) return
if (originIndex !== draggingItemIndex) {
// 不相等说明移动了
listDataChange({
originIndex,
targetIndex: draggingItemIndex,
type: 'move'
})
}
// 还原配置
setDragging(false);
setDraggingItemIndex(-1);
setOriginIndex(-1)
setStartPageY(0);
};
/**
* 当拖放生效时，重新整理数组
* @param startIndex 当前拖放列的序号
* @param moveDownAndUp 向下移动 1 向上移动-1
*/
const move = (startIndex: number, moveDownAndUp: MoveDownAndUp) => {
// 获取当前拖动的内容
let newList = [...childList]
let moveItem = newList.splice(startIndex, 1)[0];
newList.splice(startIndex + moveDownAndUp, 0, moveItem);
setChildList(newList)
};
/** 鼠标移动 */
const handleMouseMove = (event: React.MouseEvent) => {
if (childList.length === 1) return
let offset = event.pageY - startPageY;
let draggingIndex = draggingItemIndex;
//当移动的item没有超过list的长度， 则每往下移动超过lineHeight，就把数组中数据往后挪一位。相应的draggingItemIndex 和 startPageY都要增加一位。
if (offset > lineHeight && draggingIndex < childList.length - 1) {
offset -= lineHeight;
move(draggingIndex, MoveDownAndUp.down);
setDraggingItemIndex(draggingIndex + MoveDownAndUp.down);
setStartPageY(startPageY + lineHeight);
//当移动的item还是list里面， 则每往上移动超过lineHeight，就把数组中数据往前挪一位。相应的draggingItemIndex 和 startPageY都要减少一位。
} else if (offset < -lineHeight && draggingIndex > 0) {
offset += lineHeight;
move(draggingIndex, MoveDownAndUp.up);
setDraggingItemIndex(draggingIndex + MoveDownAndUp.up);
setStartPageY(startPageY - lineHeight);
}
setOffsetY(offset);
};
/** 拖动的样式 */
const getDraggingStyle = (index: number): React.CSSProperties => {
if (index === draggingItemIndex) {
return {
transform: `translate(10px, ${offsetY}px)`,
color: '#40a9ff',
opacity: 0.8
};
} else {
return {};
}
};
const ListItem: React.FC = () => {
return <>
{childList.map((child: React.ReactElement, index: number) => (
<div key={index}
draggable={childList.length > 1}
onDragStart={(event: React.DragEvent<Element>) => onDragStart(event, index)}
style={getDraggingStyle(index)}
className={styles['list-item']}>
{child}
</div >
))}
</>
}
const CoverMask: React.FC = () => {
return dragging ? <div
className={styles.coverMask}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
/> : <></>
}
return (
<div ref={listContainer} className={styles.listContainer}>
<ListItem />
<CoverMask />
</div>
);
};
function attachPropertiesToComponent<C, P extends Record<string, any>>(
component: C,
properties: P,
): C & P {
const ret = component as any
for (const key in properties) {
if (Reflect.has(properties, key)) {
ret[key] = properties[key]
}
}
return ret
}
export default attachPropertiesToComponent(DragList, {
Item: DragItem
})
CSS 部分
.listContainer {
position: relative;
}
.listContainer .coverMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(57, 243, 0, 0);
}
.list-item{
background: #fff;
min-height: 50px;
padding: 0 10px;
margin: 10px 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
border-radius: 4px;
&-title{
padding: 0 10px;
height: 100px;
flex: 1;
text-align: left;
}
&-delete{
&:hover{
fill: unset;
}
}
&-move{
cursor: pointer;
&:hover{
fill: unset;
}
}
&:hover{
&-delete{
fill: unset;
}
color: #40a9ff;
}
}
.header{
display: flex;
justify-content: flex-end;
&-add{
background: #40a9ff;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
transition: all;
border-radius: 50%;
.svg{
fill: #fff;
}
}
&-close{
background: #fff;
transition: all;
transform: rotate(45deg);
.svg{
fill: #40a9ff;
}
}
}
.drag-item{
height: var(--drag-offest-height);
overflow: auto;
max-height: 500px;
width: 100%;
}
